GraphQL Start
Search…
1. Getting Started
Learn how to start a new GraphQL API project from scratch using Node.js and JavaScript.
Step 1: Create Node.js Project
During this step, you want to ensure that at least the following things are taken care of:
- You can launch the app by running
yarn startwhich is a commonly used convention. - Node.js debugger is configured and ready to be used when needed.
Node.js project skeleton in VS Code
1
# Creates package.json file in the root of the project's folder
2
$ yarn init
3
4
# Installs Express.js and GraphQL.js NPM modules (runtime dependencies)
5
$ yarn add graphql express express-graphql
6
7
# Installs Nodemon and Babel (dev dependencies)
8
$ yarn add nodemon @babel/core @babel/cli @babel/preset-env --dev
Copied!
Create
.babelrc file containing Babel configuration. Add "start" script to the package.json file:package.json
.babelrc
1
{
2
"name": "api",
3
"version": "1.0.0",
4
"private": true,
5
"dependencies": {
6
"express": "^4.17.1",
7
"express-graphql": "^0.9.0",
8
"graphql": "^14.5.6"
9
},
10
"devDependencies": {
11
"@babel/cli": "^7.6.0",
12
"@babel/core": "^7.6.0",
13
"@babel/preset-env": "^7.6.0",
14
"nodemon": "^1.19.2"
15
},
16
"scripts": {
17
"build": "babel src --out-dir build --source-maps=inline --delete-dir-on-start --copy-files --verbose",
18
"start": "yarn build --watch & sleep 1 && nodemon --watch build build/index.js"
19
}
20
}
Copied!
1
{
2
"presets": [
3
["@babel/preset-env", { "targets": { "node": "10.15.3" } }]
4
]
5
}
Copied!
Note that the actual versions of all the listed dependencies above may differ from what you would end up having in your
package.json file, but it shouldn't be a problem.src/index.js
1
import express from "express";
2
import graphql from "express-graphql";
3
4
const app = express();
5
const port = process.env.PORT || 8080;
6
7
app.use("/", graphql({
8
schema: null, // TODO: Implement GraphQL schema
9
}));
10
11
app.listen(port, () => {
12
console.log(`GraphQL API listening on http://localhost:${port}/`);
13
});
Copied!
At this point, when you launch the app by running
yarn start and navigate to http://localhost:8080/ in the browser's window, you must be able to see the following:
Congratulations! This means that the step #1 is complete and we can move on to the next one — creating our first GraphQL schema required by the
express-graphql middleware.Step 2: Create GraphQL Schema
Basically, you create an GraphQL API by describing the hierarchy (schema) of all the (query) fields and mutations that the API must support.
Imagine that we need to fetch some OS-related info from the server using this query:
GraphQL Query
GraphQL API Response
1
query {
2
environment {
3
arch
4
platform
5
uptime
6
}
7
}
Copied!
1
{
2
data: {
3
environment: {
4
arch: 'x64',
5
platform: 'linux',
6
uptime: 11.256
7
}
8
}
9
}
Copied!
It's asking for
arch, platform, and uptime values grouped under the top-level environment field.For this particular API we would need to implement just one GraphQL type (
Environment), and one top-level query field environment. But since, we're planning to add more types and query fields later on, it would be a good idea to group them under src/types and src/queires folders. Plus, you would add src/schema.js file exporting the "schema" GraphQL object type.
GraphQL API Schema Type
In a real-world project, you may end-up having 50+ GraphQL types, depending how big is the project. Taking that into consideration, you may want to export related GraphQL types from the same file. For example,
ProductType and ProductCategoryType declarations can be exported from the **src/types/product.js**file.The
Environment GraphQL type is going to list arch, platform, and uptime fields, alongside their types and resolve() methods:src/types/environment.js
1
import { GraphQLObjectType, GraphQLString, GraphQLFloat } from "graphql";
2
3
export const EnvironmentType = new GraphQLObjectType({
4
name: "Environment",
5
6
fields: {
7
arch: {
8
type: GraphQLString,
9
resolve: () => process.arch
10
},
11
12
platform: {
13
type: GraphQLString,
14
resolve: () => process.platform
15
},
16
17
uptime: {
18
type: GraphQLFloat,
19
resolve: () => process.uptime()
20
}
21
}
22
});
Copied!
Whenever a certain field is requested by the client, the GraphQL API runtime would call the corresponding
resolve() function that would return the actual value for that field. Note that these resolve methods can be async (returning a Promise).For the top-level fields, like
environment field in our example, we're going to introduce yet another convention — placing them in multiple files under the src/queries folder. In many cases, those top-level fields would contain large resolve() functions and most likely you won't like having all of them within the same file. So, the environment field is going to be exported from src/queires/environment.js:src/queries/environment.js
1
import { EnvironmentType } from "../types";
2
3
export const environment = {
4
type: EnvironmentType,
5
resolve: () => ({})
6
};
Copied!
Note, that the field resolves to an empty object
{}. If it would resolve to null or undefined the query traversal would stop right there, and the GraphQL query (from the example above) would resolve to:1
{
2
"data": {
3
"environment": null
4
}
5
}
Copied!
You would also need
src/queries/index.js and src/types/index.js re-exporting everything from the sibling files:src/queries/index.js
src/types/index.js
1
export * from './environment';
Copied!
1
export * from './environment';
Copied!
The
environment field declaration we just created is going to be used in the root GraphQL object type:src/schema.js
1
import { GraphQLSchema, GraphQLObjectType } from "graphql";
2
import * as queries from "./queries";
3
4
export default new GraphQLSchema({
5
query: new GraphQLObjectType({
6
name: "Query",
7
fields: {
8
...queries
9
}
10
})
11
});
Copied!
Finally, we're going to pass this schema type to the
express-graphql middleware inside src/index.js :src/index.js
1
import express from "express";
2
import graphql from "express-graphql";
3
import schema from "./schema";
4
5
const app = express();
6
const port = process.env.PORT || 8080;
7
8
app.use("/", graphql({
9
schema,
10
graphiql: process.env.NODE_ENV !== "production"
11
}));
12
13
app.listen(port, () => {
14
console.log(`GraphQL API listening on http://localhost:${port}/`);
15
});
Copied!
With all that in place, you must be able to test our first GraphQL query using GraphiQL IDE that
express-graphql middleware provides out of the box:
GraphQL Query Example in GraphiQL IDE
Step 3: Create GraphQL Context
Inside of the
resolve() methods we would often need access to the (request) context data such the currently logged-in user, data loaders (more on that later), etc.For this purpose, let's create
Context class and pass it to the express-graphql middleware alongside the schema:src/context.js
1
export class Context {
2
constructor(req) {
3
this._req = req;
4
}
5
6
get user() {
7
return this._req.user;
8
}
9
10
get hostname() {
11
return this._req.hostname;
12
}
13
}
Copied!
src/index.js
1
import express from "express";
2
import graphql from "express-graphql";
3
import schema from "./schema";
4
import { Context } from "./context";
5
6
const app = express();
7
const port = process.env.PORT || 8080;
8
9
app.use("/", graphql(req => ({
10
schema,
11
context: new Context(req),
12
graphiql: process.env.NODE_ENV !== "production"
13
})));
14
15
app.listen(port, () => {
16
console.log(`GraphQL API listening on http://localhost:${port}/`);
17
});
Copied!
Just for quick demonstration, let's see how to use this context object inside of a
resolve() method:src/types/environment.js
1
import { GraphQLObjectType, GraphQLString, GraphQLFloat } from "graphql";
2
3
export const EnvironmentType = new GraphQLObjectType({
4
name: "Environment",
5
6
fields: {
7
...,
8
9
hostname: {
10
type: GraphQLString,
11
resolve(self, args, ctx) {
12
return ctx.hostname;
13
}
14
}
15
}
16
});
Copied!
Step 4: Configure a Debugger
Sooner or later you may bump into a situation where you would need to debug your code. It would be wise to ensure that debugging is working OK, even before you actually need it. In case with VS Code, setting up the debugger takes just two simple steps:
- Pass
--insepectargument tonodemon. - Create a launch configuration that would attach to an existing Node.js process.
For the first step, you can copy and paste the
start script inside of package.json file as follows:package.json
1
{
2
...,
3
"scripts": {
4
"build": "babel src --out-dir build --source-maps=inline --delete-dir-on-start --copy-files --verbose",
5
"start": "yarn build --watch & sleep 1 && nodemon --watch build build/index.js",
6
"debug": "yarn build --watch & sleep 1 && nodemon --inspect --watch build build/index.js"
7
}
8
}
Copied!
And then create
.vscode/launch.json file instructing VS Code how it should launch the debugger:.vscode/launch.json
1
{
2
"version": "0.2.0",
3
"configurations": [
4
{
5
"type": "node",
6
"request": "attach",
7
"name": "Attach to Node.js",
8
"processId": "${command:PickProcess}",
9
"restart": true,
10
"protocol": "inspector"
11
}
12
]
13
}
Copied!
GraphQL API debugging in VS Code
Last modified 21d ago