Setting up the GraphQL
Step 1: Install the following package to use graphQL in the express project. Run the following command in the terminal.
npm install @apollo/server
npm install graphql
Step 2: Import these libraries into your express application.
import { ApolloServer } from '@apollo/server';
import { expressMiddleware } from '@apollo/server/express4';
Example:
Javascript
import express from "express" ; import { ApolloServer } from "@apollo/server" ; import { expressMiddleware } from "@apollo/server/express4" ; const app = express(); const PORT = process.env.PORT || 8000; app.get( "/" , (req, res) => { res.json({ message: "server is up and running" }); }); app.listen(PORT, () => console.log( "server is started" )); |
Step 3: Create a graphQL sever and define the Schema. Add the following code in the express application.
Syntax
const yourServerName = new ApolloServer({
typeDefs: "",
resolvers: {},
});
Example
Javascript
import express from "express" ; import { ApolloServer } from "@apollo/server" ; import { expressMiddleware } from "@apollo/server/express4" ; const app = express(); const PORT = process.env.PORT || 8000; //create a graphql server and define Schema const gqlServer = new ApolloServer({ typeDefs: ` type Query{ hello: String }`, resolvers: { Query: { hello: () => `hi this is a graphQL Server`, }, }, }); app.get( "/" , (req, res) => { res.json({ message: "server is up and running" }); }); app.listen(PORT, () => console.log( "server is started" )); |
The schema is defined in the typeDefs property using GraphQL’s schema definition language .
A resolver for the “hello” query is provided in the resolvers property.
Step 4: Start the graphQL server. To do that wrap the whole code inside a async function.
await yourServerName.start();
Javascript
import express from "express" ; import { ApolloServer } from "@apollo/server" ; import { expressMiddleware } from "@apollo/server/express4" ; async function init() { const app = express(); const PORT = process.env.PORT || 8000; //create a graphql server and define Schema const gqlServer = new ApolloServer({ typeDefs: ` type Query{ hello: String }`, resolvers: { Query: { hello: () => `hi this is a graphQL Server`, }, }, }); await gqlServer.start(); app.get( "/" , (req, res) => { res.json({ message: "server is up and running" }); }); app.listen(PORT, () => console.log( "server is started" )); } init(); |
Step 5: Expose the graphQL server at a endpoint. By exposing the endpoint you can access the GraphQL Playground.
app.use("/yourEndpointName", expressMiddleware(yourServerName));
Javascript
import express from "express" ; import { ApolloServer } from "@apollo/server" ; import { expressMiddleware } from "@apollo/server/express4" ; async function init() { const app = express(); app.use(express.json()); const PORT = process.env.PORT || 8000; //create a graphql server and define Schema const gqlServer = new ApolloServer({ typeDefs: ` type Query{ hello: String }`, resolvers: { Query: { hello: () => `hi this is a graphQL Server`, }, }, }); await gqlServer.start(); app.get( "/" , (req, res) => { res.json({ message: "server is up and running" }); }); app.use( "/graphql" , expressMiddleware(gqlServer)); app.listen(PORT, () => console.log( "server is started" )); } init(); |
Step 6: Start the express server and hit the endpoint to which our graphQL server is exposed to.
Example:
http://localhost:8000/graphql/
Dependencies
"dependencies": {
"@apollo/server": "^4.10.0",
"express": "^4.18.2",
"graphql": "^16.8.1"
},
Project Structure
Output:
Accessing http://localhost:8000/ will respond with.
{
"message": "server is up and running"
}.
Accessing http://localhost:8000/graphql allows sending GraphQL queries.
Example: Project Structure:
Environment Setup in GraphQL
GraphQL is an open-source data query language for APIs and It is a server–side runtime for executing the query. The server’s GraphQL runtime takes care of executing the query and ensuring that the right data is fetched and sent back.
Before getting started with the GraphQL development journey it is important to set up your environment properly. This article will guide you through the essential steps to create an environment for GraphQL development.