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

Multiple RootQuery end points

\n

Right now, our data graph is unidirectional in nature. It only allows us to query for a user. We don’t yet have the capability to directly query for a company. We can only access a company by first accessing a user and then the associated company.

\n

In GraphiQL, if we issue a query asking for the name of a company with an id of 1, we get an error that says, we don’t have a company field in our RootQueryType.

\n

\n \n \n \n \n

\n

Inside the schema.js file, inside the fields property of RootQuery, we will add a company property as a sibling to the user property.

\n
server/schema.js
\n
const graphql = require("graphql");\nconst axios = require("axios");\n\nconst { GraphQLString, GraphQLObjectType, GraphQLInt, GraphQLSchema } = graphql;\n\nconst CompanyType = new GraphQLObjectType({\n  name: "Company",\n  fields: {\n    id: { type: GraphQLString },\n    name: { type: GraphQLString },\n    description: { type: GraphQLString },\n  },\n});\n\nconst UserType = new GraphQLObjectType({\n  name: "User",\n  fields: () => ({\n    id: { type: GraphQLString },\n    firstName: { type: GraphQLString },\n    age: { type: GraphQLInt },\n    company: {\n      type: CompanyType,\n      resolve(parentValue, args) {\n        return axios\n          .get(`http://localhost:3000/companies/${parentValue.companyId}`)\n          .then((res) => res.data);\n      },\n    },\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    company: {\n      type: CompanyType,\n      args: { id: { type: GraphQLString } },\n      resolve(parentValue, args) {\n        return axios\n          .get(`http://localhost:3000/companies/${args.id}`)\n          .then((res) => res.data);\n      },\n    },\n  },\n});\n\nmodule.exports = new GraphQLSchema({\n  query: RootQuery,\n});\n
\n

The args property on line 46 says that whenever anyone makes a query for a company, they must provide an id argument of type String.

\n

Now, if we go to GraphiQL and ask for the details of a company with an id of 1, we will get our response.

\n

\n \n \n \n \n

\n

Bidirectional items

\n

Currently our GraphQL API has the following capabilities.

\n\n

We dont yet have the capability to go from a company over to a user. This is because we have not defined a users field inside the CompanyType object inside our schema.js file.

\n

Add a users field inside the CompanyType object as highlighted below. Also remember to import GraphQLList from graphql.

\n
server/schema.js
\n
const graphql = require("graphql");\nconst axios = require("axios");\n\nconst { GraphQLString, GraphQLObjectType, GraphQLInt, GraphQLSchema, GraphQLList } = graphql;\n\nconst CompanyType = new GraphQLObjectType({\n  name: "Company",\n  fields: {\n    id: { type: GraphQLString },\n    name: { type: GraphQLString },\n    description: { type: GraphQLString },\n    users: {\n      type: new GraphQLList(UserType),\n      resolve(parentValue, args) {\n        return axios\n          .get(`http://localhost:3000/companies/${parentValue.id}/users`)\n          .then((response) => response.data);\n      },\n    },\n  },\n});\n\nconst UserType = new GraphQLObjectType({\n  name: "User",\n  fields: {\n    id: { type: GraphQLString },\n    firstName: { type: GraphQLString },\n    age: { type: GraphQLInt },\n    company: {\n      type: CompanyType,\n      resolve(parentValue, args) {\n        return axios\n          .get(`http://localhost:3000/companies/${parentValue.companyId}`)\n          .then((res) => res.data);\n      },\n    },\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    company: {\n      type: CompanyType,\n      args: { id: { type: GraphQLString } },\n      resolve(parentValue, args) {\n        return axios\n          .get(`http://localhost:3000/companies/${args.id}`)\n          .then((res) => res.data);\n      },\n    },\n  },\n});\n\nmodule.exports = new GraphQLSchema({\n  query: RootQuery,\n});
\n

Note that a company is associated with multiple users. This is why, on line 13, we have wrapped UserType with GraphQLList.

\n

Once we add the above-mentioned block of code, we are going to receive an error in our console.

\n

\n \n \n \n \n

\n

Resolving circular reference

\n

We can figure out the problem from the error message we received in the console.

\n

The problem is: we have defined the UserType after we have defined the CompanyType inside the schema.js file. However, JavaScript doesn't allow us to access a variable before we have defined the variable. Yet, we are trying to access the UserType inside the CompanyType on line 13.

\n

You might think we can solve the problem by defining UserType before CompanyType. But then we will face another problem. In UserType, we are also referencing CompanyType.

\n

We have a circular reference in our application. The UserType needs access to the CompanyType and the CompanyType needs access to the UserType.

\n

So, how do we resolve the problem of circular references?

\n

We can solve the issue by wrapping the value of the fields property in both the CompanyType and the UserType with an arrow function.

\n

Modify the schema.js file as shown below:

\n
server/schema.js
\n
const graphql = require("graphql");\nconst axios = require("axios");\n\nconst {\n  GraphQLString,\n  GraphQLObjectType,\n  GraphQLInt,\n  GraphQLSchema,\n  GraphQLList,\n} = graphql;\n\nconst CompanyType = new GraphQLObjectType({\n  name: "Company",\n  fields: () => ({\n    id: { type: GraphQLString },\n    name: { type: GraphQLString },\n    description: { type: GraphQLString },\n    users: {\n      type: new GraphQLList(UserType),\n      resolve(parentValue, args) {\n        return axios\n          .get(`http://localhost:3000/companies/${parentValue.id}/users`)\n          .then((response) => response.data);\n      },\n    },\n  }),\n});\n\nconst UserType = new GraphQLObjectType({\n  name: "User",\n  fields: () => ({\n    id: { type: GraphQLString },\n    firstName: { type: GraphQLString },\n    age: { type: GraphQLInt },\n    company: {\n      type: CompanyType,\n      resolve(parentValue, args) {\n        return axios\n          .get(`http://localhost:3000/companies/${parentValue.companyId}`)\n          .then((res) => res.data);\n      },\n    },\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    company: {\n      type: CompanyType,\n      args: { id: { type: GraphQLString } },\n      resolve(parentValue, args) {\n        return axios\n          .get(`http://localhost:3000/companies/${args.id}`)\n          .then((res) => res.data);\n      },\n    },\n  },\n});\n\nmodule.exports = new GraphQLSchema({\n  query: RootQuery,\n});\n
\n

We don't have the error message in the console anymore.

\n

Now our GraphQL API has such capabilities that we can directly query for a company and the list of users associated with the company.

\n

Let’s move over to GraphiQL and run the following query. As you can see, we are now able to fetch the details of a company along with the details of the lists of users associated with that company.

\n

\n \n \n \n \n

\n

Go to part-7

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