GraphQL First Example

Let's create a simple Hello World example in GraphQL. Here, we shall use Node.js, Express, Apollo server, and GraphiQL. We shall use these concepts together to build a GraphQL API for client and server communication.

Note:

Node.js: As we have explained in the previous chapter, Node.js is an open-source, cross-platform, server runtime environment that is used to execute JavaScript code outside of a web browser.

Express: Express is a popular web application framework for Node.js. It is used to build websites and web applications along with Node.js. In this example, we shall set up Express with Node.js and build a GraphQL API on top of the Express framework.

Apollo Server: Apollo Server is an open-source, spec-compliant GraphQL server which can be used easily with any GraphQL client, such as Apollo Client. Apollo Server is the most preferred server to build a production-ready, self-documenting GraphQL API that can able to retrieve data from any source.

GraphiQL: GraphiQL is the integrated development environment (IDE) for GraphQL. It is one of the best and complete tools to make Gatsby websites (A website that takes static data sources like Markdown and turns them into a dynamic site using React JS, called Gatsby website).

You can access GraphiQL on your web browser when the development server of your site is running. It is accessed normally at http://localhost:4000/graphql

Create Example

First, create a folder named "first-example" and navigate to the folder by using node.js command prompt.

Now, add package.json file in the project folder "first-example" and give a name to the package. We are going to use this package internally so that it will be a private type.

Step 1- Install Express and its Dependencies

Now, install express your current directory along with two additional dependencies i.e. body-parser and cors.

Here, body-parser and cors are middleware packages used by Express. Express uses the body-parser package to handle HTTP Post requests efficiently and cors package to handle cross-origin resource sharing.

Now it's the time to create a server. Create a file named server.js and use the following code within it.

Now, you can check and verify that the server is started and running at http://localhost:4000/, but this is not the end. You have to install GraphQL and Apollo server also. You should use Ctrl+C to stop the server.

Step 2- Install GraphQL and Apollo Server

After setting up Express, it's turn to install GraphQL and Apollo server with their required dependencies.

• graphql
• graphql-tools
• apollo-server-express@1

Here, Apollo server v1.0 is used because it is a stable release.

Use the following command to install the required dependencies:

If you want to verify that the dependencies are installed successfully or not, you can check the package.json file that we have already created in the project folder.

You can see that dependencies are installed successfully.

Step 3- Define the Schema

The GraphQL schema is used to define the kind of objects which can be fetched from service, and the fields they contain. GraphQL Schema Definition Language is used to define GraphQL schema.

Add the following code in server.js file to define the schema:

Here, hello is the attribute of the query that returns a string value.

Step 4- Create a Resolver

The resolver is used to process the request to the hello attribute of the query. The structure of the resolver function and the schema function must be the same. Add the following code in the server.js file.

Use a pre-defined function makeExecutableSchema() to bind the schema and resolver. This function is pre-defined in the graphql-tools module.

Add the following code in the server.js file to bind the schema and resolver.

Step 5- Define Routes to Retrieve Data from ReactJS/GraphiQL Application

Add the following code in the server.js file to define a route to retrieve the data.

Here, the graphqlExpress function is used to register the route http://localhost:4000/graphql and the graphqliExpress function is used to register the route http://localhost:4000/graphiql.

Now, the complete server.js file will look like this:

Step 6- Start the Server

Use the following command to execute the server:

Step 7- Open the browser to test the API

Open the browser at http://localhost:4000/graphiql and use the query

You will see the output:

Output: