The overall architecture of the application that we are going to build in this blog series is as follows:
\nWe will use GraphiQL, a browser-based editor to explore and test GraphQL requests. We will use Express to create a web server to listen for incoming HTTP requests.
Express will run a check on every request sent by the client and figure out whether the request is asking for GraphQL. If yes, Express will then hand over the request to GraphQL, which will do its processing (communicate with a database or a third-party API for example), put together a response and return the response back to Express, which in turn will forward the response back to the client.
\nIf the request is not asking for GraphQL, then Express will do the necessary processing and send back the response to the client.
\nIt's important to note that GraphQL is a small part of our Express application; its not the entire application.
\nLet's start building our application.
\nCreate a folder on the desktop named gql-app. Open the folder in VS Code or any other code editor of your choice.
Inside gql-app, create a directory called server, and inside the server directory create a file named index.js.
Then initialize the server directory with npm init y.
PS C:\\Users\\Delhivery\\Desktop\\gql-app\\server> npm init -yThen install the following 5 packages.
\nPS C:\\Users\\Delhivery\\Desktop\\gql-app\\server> npm i express graphql express-graphql lodash nodemonexpress-graphql: This module provides a simple way to create an Express server that runs a GraphQL API. By default, Express and GraphQL are not compatible. The express-graphql package will act as a glue layer between Express and GraphQL, so that they can work with each other.
express: We will use Express to create a web server, which will listen for incoming HTTP requests.
graphql: The GraphQL library used to crawl through our data.
lodash: A JavaScript library that contains utility functions.
nodemon: It will automatically restart our Express application when file changes are detected in the directory.
Then inside the scripts section of the package.json file, add the following highlighted line in order for nodemon to take effect.
{\n "name": "server",\n "version": "1.0.0",\n "description": "",\n "main": "index.js",\n "scripts": {\n "start":"nodemon index.js"\n },\n "keywords": [],\n "author": "",\n "license": "ISC",\n "dependencies": {\n "express": "^4.17.1",\n "express-graphql": "^0.12.0",\n "lodash": "^4.17.21",\n "nodemon": "^2.0.7"\n }\n}Inside the index.js file, paste the following code.
const express = require("express");\n\nconst app = express();\n\nconst PORT = 5000;\n\napp.listen(PORT, () => {\n console.log(`Server listening on http://localhost:${PORT}`);\n});Start the server using the following command:
\nPS C:\\Users\\Delhivery\\Desktop\\gql-app\\server> npm startYou should see the following output in the console.
\nIn part-2, we will work on building our GraphQL schema and add it to the expressGraphQL middleware in order to get rid of the error message.
Go to part-2
\n","frontmatter":{"title":"How to Build an Express/GraphQL Server - Part 1?","date":"2021-06-06"}}},"pageContext":{"slug":"/how-to-build-an-express-graphql-server-part-one/","prev":{"fields":{"slug":"/how-to-build-an-express-graphql-server-part-8/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/array.from()-in-javascript/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}