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.

GraphQL First Example

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.

GraphQL First Example

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.

  const bodyParser = require(‘body-parser’)     const cors = require(‘cors’)     const express = require(‘express’)     const port = process.env.PORT|| 4000     const app = express()          //register middleware     app.use(bodyParser.json() , cors())     app.listen(port, () =>  console.log(`server is started and running at ${port}`)  

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
[email protected]

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

Use the following command to install the required dependencies:

GraphQL First Example

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.

  {     “name”: “first-example”,     “private”: true,     “dependencies”: {        “apollo-server-express”: “^1.4.0”,        “body-parser”: “^1.19.0”,        “cors”: “^2.8.5”,        “express”: “^4.17.1”,        “graphql”: “^15.0.0”,        “graphql-tools”: “^5.0.0”     }  }  

GraphQL First Example

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:

  // Adding Type Definitions  const typeDefinition = `     type Query  {        hello: String     }  

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.

  // Adding resolver  const  resolverObject = {     Query : {        hello: () => ‘Hello World! Welcome to Tutor Aspire…’     }  }  

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.

  const {makeExecutableSchema} = require(‘graphql-tools’)  const schema = makeExecutableSchema({typeDefs:typeDefinition, resolvers:resolverObject})  

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.

  const {graphqlExpress, graphiqlExpress} = require(‘apollo-server-express’)     //create routes for graphql and graphiql     app.use(‘/graphql’,graphqlExpress({schema}))        app.use(‘/graphiql’,graphiqlExpress({endpointURL:’/graphql’}))  

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:

  const bodyParser = require(‘body-parser’)  const cors = require(‘cors’)  const express = require(‘express’)  const port = process.env.PORT||4000  const app = express()  app.use(bodyParser.json() , cors())  const typeDefinition = `  type Query  {     hello: String  }`  const  resolverObject = {     Query : {        hello: () => ‘Hello World! Welcome to Tutor Aspire…’     }  }  const {makeExecutableSchema} = require(‘graphql-tools’)  const schema = makeExecutableSchema({typeDefs:typeDefinition, resolvers:resolverObject})  const {graphqlExpress,graphiqlExpress} = require(‘apollo-server-express’)  app.use(‘/graphql’,graphqlExpress({schema}))  app.use(‘/graphiql’,graphiqlExpress({endpointURL:’/graphql’}))  app.listen(port, () =>  console.log(`server is started and running ${port}`))  

Step 6- Start the Server

Use the following command to execute the server:

GraphQL First Example

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:

  {    “data”: {      “hello”: “Hello World! Welcome to Tutor Aspire…”    }  }  

Output:

GraphQL First Example

Next TopicGraphQL Application Components

GraphQL First Example

GraphQL First Example

Create Example

IT Full Forms List

URL Encoding in HTTP

You may also like