Executing Queries in GraphQL

Are you familiar with GraphQL queries and their operation?

• When a client delivers a GraphQL query, the server verifies it against the schema to ensure that it follows the correct types and standards.
• Following that, the server starts processing using the root-level query resolver. The query resolver will return the raw data requested by the client.
• When a query resolver finds nested fields in a query, it calls an additional query resolvers to retrieve information about those fields.
• The query resolver organizes the request data into a hierarchical structure that matches the shape of the original query.
• After all query resolvers have completed, the server returns the requested data to the client in JSON format.

The next stage after creating a GraphQL query is execution. GraphQL provides a single endpoint, typically /graphql, for all queries. Send a POST request to this endpoint with your query as the request payload. consider the following sample code.

const query = `
  query {
    user(id: 1) {
      name
      email
      posts {
        title
        body
      }
    }
  }
`;

fetch('/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ query }),
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Now, let’s break down the code:

• const query: variable to store GraphQL query as string.
• fetch: Send a POST request to the /graphql endpoint.
• headers: The request’s content type is JSON. This tells the server that the request payload is in JSON format.
• body: Convert the query string to JSON string and attach it with the body of the request.
• .then(response => response.json()): It converts the response to JSON format.
• .then(data => { console.log(data); }): print the response in the console.
• .catch(error => { console.error(‘Error:’, error); }): check for errors, if occured.

Let’s understand the GraphQL queries with the help of example.

GraphQL has developed into an effective API language that offers developers more effective and adaptable ways to work with data. By enabling clients to request only the data they require, GraphQL, in contrast with traditional REST APIs, removes over- and under-conditioning. In this article, we are going to go through the fundamentals of creating and executing queries in GraphQL.