{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/how-to-build-an-express-graphql-server-part-4/", "result": {"data":{"markdownRemark":{"html":"
\n\n
\n
This blog post is part of a series. You must finish part-1, part-2 & part-3 before continuing here.
\n

Fake REST API

\n

In our schema.js file, we have hard-coded a list of users. However, in a real-world scenario, we will be fetching data from a database or a third-party API.

\n

In this post, we are going simulate the real-world scenario by using json-server, a fake REST API, to which our GraphQL server will make HTTP requests to fetch data.

\n

Let's install json-server.

\n
PS C:\\Users\\Delhivery\\Desktop\\gql-app\\server> npm i json-server
\n

In the server directory, make a new file named db.json and paste the following list of users.

\n
server/db.json
\n
{\n    "users": [\n      {\n        "id": "45",\n        "firstName": "Nicole",\n        "age": 25,\n      },\n      {\n        "id": "26",\n        "firstName": "Alex",\n        "age": 24,\n      },\n      {\n        "id": "28",\n        "firstName": "Harry",\n        "age": 27,\n      }\n    ]\n}
\n

Make sure to use double quotes. Valid JSON requires double quotes.

\n

In order to start our JSON server, we will add a helper script inside the package.json file.

\n
server/package.json
\n
{\n  "name": "server",\n  "version": "1.0.0",\n  "description": "",\n  "main": "index.js",\n  "scripts": {\n    "start": "nodemon index.js",\n    "json:server": "json-server --watch db.json"\n  },\n  "keywords": [],\n  "author": "",\n  "license": "ISC",\n  "dependencies": {\n    "express": "^4.17.1",\n    "express-graphql": "^0.12.0",\n    "json-server": "^0.16.3",\n    "lodash": "^4.17.21",\n    "nodemon": "^2.0.7"\n  }\n}
\n

Open a second terminal window and run the following command to start the JSON server.

\n
PS C:\\Users\\Delhivery\\Desktop\\gql-app\\server> npm run json:server
\n

In the console, you should see an outout like this:

\n

\n \n \n \n \n

\n

Our JSON server is running at http://localhost:3000 and we can get access to our list of users (which we have inside the db.json file) at the /users endpoint. If you visit http://localhost:3000/users URL, you should see the list of users.

\n

\n \n \n \n \n

\n

Note that json-server serves up raw JSON data.

\n

It's imporatnt to note that the JSON server is a completely different running process than our GraphQL server.

\n

The GraphiQL instance is running on port 5000 (http://localhost:5000/graphql), whereas the JSON server is running on port 3000 (http://localhost:3000).

\n

If we go to http://localhost:3000/users/45, we get a single user with an id of 45.

\n

\n \n axios.

\n
PS C:\\Users\\Delhivery\\Desktop\\gql-app\\server> npm i axios
\n

In the schema.js file, we will remove the hard-coded list of users and the lodash import, because we will now make use of the JSON server.

\n

Update the schema.js file as follows:

\n
server/schema.js
\n
const graphql = require("graphql");\nconst axios = require("axios");\n\nconst { GraphQLString, GraphQLObjectType, GraphQLInt, GraphQLSchema } = graphql;\n\nconst UserType = new GraphQLObjectType({\n  name: "User",\n  fields: {\n    id: { type: GraphQLString },\n    firstName: { type: GraphQLString },\n    age: { type: GraphQLInt },\n  },\n});\n\nconst RootQuery = new GraphQLObjectType({\n  name: "RootQueryType",\n  fields: {\n    user: {\n      type: UserType,\n      args: { id: { type: GraphQLString } },\n      resolve(parentValue, args) {\n        return axios\n          .get(`http://localhost:3000/users/${args.id}`)\n          .then((res) => res.data);\n      },\n    },\n  },\n});\n\nmodule.exports = new GraphQLSchema({\n  query: RootQuery,\n});
\n

Note that when axios resolves, the actual response will be nested inside the data property.

\n

Make sure both the servers are running. Then go to GraphiQL and make a query for the user with an id of 45. And we get the response from the JSON server. Perfect.

\n

\n \n \n \n \n

\n

Go to part-5

\n","frontmatter":{"title":"How to Build an Express/GraphQL Server - Part 4?","date":"2021-06-06"}}},"pageContext":{"slug":"/how-to-build-an-express-graphql-server-part-4/","prev":{"fields":{"slug":"/how-to-build-an-express-graphql-server-part-3/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/how-to-build-an-express-graphql-server-part-5/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}