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

We can now access the GraphiQL IDE at the /graphql endpoint. This is how the GraphiQL IDE looks like:

\n

\n \n \n \n \n

\n

We have a RootQueryType. Click on RootQueryType and you should see something like below:

\n

\n \n \n \n \n

\n

This means that we can fetch a user if we provide an id of type String.

\n

Now if you click on User, you should see a response that will have three properties: id, firstName & age.

\n

\n \n \n \n \n

\n

As you can see, you can get a lot of information just looking inside the Documentation Explorer without checking your schema.

\n

GraphQL query

\n

Let's write our first GraphQL query.

\n

A query describes the data you want to fetch. Note that the query looks like the shape of the JSON you want, but is NOT REALLY JSON.

\n

\n \n \n \n \n

\n

Here, we asked GraphQL to find the user with an id of 12. And if the user was found, we asked for the id, firstName and the age of the user. The response that we got back from the server looks nearly identical to the query we made. It's imporatnt to note that the response is available as the value of the data field.

\n

So, how does the query get resolved?

\n

The query that we wrote gets sent to the RootQuery. The RootQuery then takes the query and enters into our graph of data. Because we have specified user as the field of the query, the RootQuery went and found the user key inside its fields object.

\n

We have specified in the args key that a query must come with an id of type String. In our query, we have provide the id argument of type String. Then GraphQL goes and finds the user based on the logic we have written inside the resolve() function. The resolve() function returns an object. GraphQL selects the id, firstName and age properties from the object and returns them as response.

\n

If we try to query for a user that does not exist, we don't get an error. We get the value of the user as null.

\n

\n \n .grvsc-code > .grvsc-line::before {\n content: ' ';\n position: absolute;\n width: 100%;\n }\n \n .grvsc-line-diff-add::before {\n background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));\n }\n \n .grvsc-line-diff-del::before {\n background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));\n }\n \n .grvsc-line-number {\n padding: 0 2px;\n text-align: right;\n opacity: 0.7;\n }\n \n","frontmatter":{"title":"How to Build an Express/GraphQL Server - Part 3?","date":"2021-06-06"}}},"pageContext":{"slug":"/how-to-build-an-express-graphql-server-part-3/","prev":{"fields":{"slug":"/how-to-build-an-express-graphql-server-part-2/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/how-to-build-an-express-graphql-server-part-4/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}