Apollo Server is a GraphQL server that you canset up in minutes and use with your existing data source (or REST API). You canthen connect any GraphQL client to it to receive the data and take advantage ofGraphQL benefits, such as type-checking and efficient fetching.

We're going to get a simple Apollo server up and running that will allow us toquery some local data. We're only going to need three files for this:

1. schema.ts to set up our data model
2. resolvers.ts to set up how we're going to populate the data fields in ourschema
3. Ourmain.ts where the server is going to launch

We'll start by creating them:

touch schema.ts resolvers.ts main.ts

Let's go through setting up each.

View source here.

schema.tsJump to heading#

Ourschema.ts file describes our data. In this case, our data is a list ofdinosaurs. We want our users to be able to get the name and a short descriptionof each dino. In GraphQL language, this means thatDinosaur is ourtype,andname anddescription are ourfields. We can also define the datatype for each field. In this case, both are strings.

This is also where we describe the queries we allow for our data, using thespecialQuery type in GraphQL. We have two queries:

• dinosaurs which gets a list of all dinosaurs
• dinosaur which takes in thename of a dinosaur as an argument and returnsinformation about that one type of dinosaur.

We're going to export all this within ourtypeDefs type definitions, variable:

exportconst typeDefs=`  type Dinosaur {    name: String    description: String  }  type Query {    dinosaurs: [Dinosaur]dinosaur(name: String): Dinosaur  }`;

If we wanted to write data, this is also where we would describe theMutation to do so. Mutations are how you write data with GraphQL. Because weare using a static dataset here, we won't be writing anything.

resolvers.tsJump to heading#

A resolver is responsible for populating the data for each query. Here we haveour list of dinosaurs and all the resolver is going to do is either a) pass thatentire list to the client if the user requests thedinosaurs query, or passjust one if the user requests thedinosaur query.

const dinosaurs=[{    name:"Aardonyx",    description:"An early stage in the evolution of sauropods.",},{    name:"Abelisaurus",    description:'"Abel\'s lizard" has been reconstructed from a single skull.',},];exportconst resolvers={  Query:{dinosaurs:()=> dinosaurs,dinosaur:(_:any, args:any)=>{return dinosaurs.find((dinosaur)=> dinosaur.name=== args.name);},},};

With the latter, we pass the arguments from the client into a function to matchthe name to a name in our dataset.

main.tsJump to heading#

In ourmain.ts we're going to import theApolloServer as well asgraphqland ourtypeDefs from the schema and our resolvers:

import{ ApolloServer}from"npm:@apollo/server@^4.1";import{ startStandaloneServer}from"npm:@apollo/server@4.1/standalone";import{ graphql}from"npm:graphql@16.6";import{ typeDefs}from"./schema.ts";import{ resolvers}from"./resolvers.ts";const server=newApolloServer({  typeDefs,  resolvers,});const{ url}=awaitstartStandaloneServer(server,{  listen:{ port:8000},});console.log(`Server running on:${url}`);

We pass ourtypeDefs andresolvers toApolloServer to spool up a newserver. Finally,startStandaloneServer is a helper function to get the serverup and running quickly.

Running the serverJump to heading#

All that is left to do now is run the server:

deno run --allow-net --allow-read --allow-env main.ts

You should seeServer running on: 127.0.0.1:8000 in your terminal. If you goto that address you will see the Apollo sandbox where we can enter ourdinosaurs query:

query {  dinosaurs {    name    description  }}

This will return our dataset:

{  "data": {    "dinosaurs": [      {        "name": "Aardonyx",        "description": "An early stage in the evolution of sauropods."      },      {        "name": "Abelisaurus",        "description": "\"Abel's lizard\" has been reconstructed from a single skull."      }    ]  }}

Or if we want just onedinosaur:

query {  dinosaur(name:"Aardonyx") {    name    description  }}

Which returns:

{  "data": {    "dinosaur": {      "name": "Aardonyx",      "description": "An early stage in the evolution of sauropods."    }  }}

Awesome!

Learn more about using Apollo and GraphQL in their tutorials.