Overview
Our schema is in good shape, but we need a server that can actually use it to fulfill the requests it receives!
In this lesson, we will:
- Set up Apollo Server
🛠Backend first steps
On the backend side, our first goal is to create a GraphQL server that can:
- Receive an incoming GraphQL query from our client
- Validate that query against our newly created schema
- Populate the queried schema fields with mocked data
- Return the populated fields as a response
The Apollo Server library helps us implement this server quickly, painlessly, and in a production-ready way.
Adding server dependencies
To get started with our server, we'll need a couple packages first: @apollo/server
, graphql
and graphql-tag
.
- The
@apollo/server
package provides a full-fledged, spec-compliant GraphQL server. - The
graphql
package provides the core logic for parsing and validating GraphQL queries. - The
graphql-tag
package provides thegql
template literal that we'll use in a moment.
In a new terminal in the root of the project, run the following:
npm install @apollo/server graphql graphql-tag
These packages are responsible for all of the GraphQL wiring we'll need to get our project up and running.
But before it can do anything for us, we actually need to define a schema!
Implementing Apollo Server
In the src
folder, open index.ts
.
We'll start with some imports. To create our server, we'll use the @apollo/server
package that we installed previously. From that package, we'll import ApolloServer
. We'll also need to use the startStandaloneServer
function, which we can import from the @apollo/server/standalone
package.
import { ApolloServer } from "@apollo/server";import { startStandaloneServer } from "@apollo/server/standalone";
To bring in the contents of schema.graphql
, we'll need some additional imports.
import { readFileSync } from "fs";import path from "path";import { gql } from "graphql-tag";
We'll use both readFileSync
and the path
utility to read in the contents of the schema.graphql
file. The gql
utility we're importing is a tagged template literal, used for wrapping GraphQL strings like the schema definition we're about to import! This converts GraphQL strings into the format that Apollo libraries expect when working with operations and schemas, and it also enables syntax highlighting.
Just below these imports, we'll add a line that puts all of these imports together and reads in our schema file.
const typeDefs = gql(readFileSync(path.resolve(__dirname, "./schema.graphql"), {encoding: "utf-8",}));
Next, let's set up an async
function called startApolloServer
. Inside, we'll create an instance of the ApolloServer
class and pass it our typeDefs
in its options object:
async function startApolloServer() {const server = new ApolloServer({ typeDefs });}
Note: We're using shorthand property notation with implied keys, because we've named our constant with the matching key (typeDefs
).
To start the server, we'll use the startStandaloneServer
function, passing it the server
we just initialized.
async function startApolloServer() {const server = new ApolloServer({ typeDefs });startStandaloneServer(server);}
The startStandaloneServer
function returns a Promise
, so we'll await
the results of that call, and pull out the url
property from the result.
async function startApolloServer() {const server = new ApolloServer({ typeDefs });const { url } = await startStandaloneServer(server);}
We'll also log a nice little message letting us know that our server is indeed up and running!
async function startApolloServer() {const server = new ApolloServer({ typeDefs });const { url } = await startStandaloneServer(server);console.log(`🚀 Server is running!📠Query at ${url}`);}
Finally, let's not forget to actually call the startApolloServer
function at the bottom of the file!
startApolloServer();
Save your changes. From the terminal, we'll launch our server with npm run dev
.
We get the log message and...not much else! We have a running server, but that's it. Floating in the vacuum of localhost
space without access to any data, it's a sad and lonely server for now. 😿
🚀 Server is running!📠Query at http://localhost:4000/
Even though our server isn't connected to any data sources yet, it would be great to be able to send the server a test query and get a valid response.
Practice
Up next
Let's take our server for a spin with some mock data. In the next lesson, we'll explore a development environment that gives us everything we need to jump into our GraphQL API.
Share your questions and comments about this lesson
This course is currently in
You'll need a GitHub account to post below. Don't have one? Post in our Odyssey forum instead.