Get Started With Apollo Server In Typescript
Oct 29th, 2021 - written by Kimserey with .
Apollo server is a GraphQL server quick and easy to setup. In today’s post, we will look at how we can kick start a new Apollo server with a simple graph in Typescript.
Setup The Project
We start first by creating a new project:
1
2
3
mkdir graphql-apollo-test
cd graphql-apollo-test
npm init -y
Then we can install apollo-server and graphql dependencies.
1
npm install apollo-server graphql
Here we installed apollo-server which is a GraphQL server implementation and graphql which is the Javascript reference implementation of GraphQL.
Next we can define our entrypoint file:
1
2
3
mkdir src
cd src
touch index.ts
Since we are going to develop in Typescript, we must make sure we have ts-node installed:
1
npm install --save-dev typescript ts-node
and install the type definition for node:
1
npm install @types/node --save-dev
Lastly we can add a start script in package.json:
1
2
3
"scripts": {
"start": "nodemon --exec ts-node src/index.ts"
},
this will allow us to start our application with npm run start. Note that we are using nodemon to watch our source code so it should also be installed.
1
npm install --save-dev nodemon
At the end, the dependencies should look like this:
1
2
3
4
5
6
7
8
9
10
11
{
"dependencies": {
"apollo-server": "^3.4.0",
"graphql": "^15.6.1"
},
"devDependencies": {
"nodemon": "^2.0.14",
"ts-node": "^10.4.0",
"typescript": "^4.4.4"
}
}
Define The Schema
Now that we have our project structure, we first define our graphql schema:
1
2
3
4
5
6
7
8
9
10
11
12
import { ApolloServer, gql } from "apollo-server";
const typeDefs = gql`
type Book {
title: String
author: String
}
type Query {
books: [Book]
}
`;
We use gql providing a TemplateStringArray containing the schema definition of our graph. Here we have a Book type with a single query books getting a list of books. The Query type is a special type that lists all the queries that our schema provides.
Next we define our resolver:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const resolvers = {
Query: {
books: () => [
{
title: "Made of Wolves",
author: "James Carter",
},
{
title: "The Visitor in the City",
author: "Arthur Novotic",
},
],
},
};
The resolver will be invoked to get the data on query. If a field was returning an object type, graphql will lookup a resolver for that field as well. For example if we include another type in our type defintion:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const typeDefs = gql`
type Person {
id: ID!
name: String!
}
type Book {
title: String
author: Person
}
type Query {
books: [Book]
}
`;
Here we have updated our Book.author to be of type Person. We can then update our resolvers by adding a resolver for Person:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const resolvers = {
Query: {
books: () => [
{
title: "Made of Wolves",
authorId: "1",
},
{
title: "The Visitor in the City",
authorId: "2",
},
],
},
Book: {
author: (parent: any) => {
return {
id: parent.authorId,
name: parent.authorId == "1" ? "James Carter" : "Arthur Novotic",
};
},
},
};
Our Book.author will be invoked with parent being the book. As we provide authorId with the book, we make use of it to identify the author.
Now that we have seen how to declare a type definition and resolvers, all we have left to do is to bootstrap the Apollo server:
1
2
3
4
5
6
7
8
9
import { ApolloServer } from "apollo-server";
async function main() {
const server = new ApolloServer({ typeDefs, resolvers });
await server.listen(4000);
console.log("Server started on http://localhost:4000");
}
main();
We create the Apollo server by passing in the typeDefs and the resolvers and start it by calling .listen.
Query Data
So far we have completed the code for our server, we can now start it using:
1
npm run start
By navigating to http:localhost:4000, we will get into the Apollo studio playground which allows us to make queries. As we have defined a single query books, we can create a graphql query and request for the books together with the authors:
1
2
3
4
5
6
7
8
9
query Query {
books {
title,
author {
id
name
}
}
}
which will give us:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
"data": {
"books": [
{
"title": "Made of Wolves",
"author": {
"id": "1",
"name": "James Carter"
}
},
{
"title": "The Visitor in the City",
"author": {
"id": "2",
"name": "Arthur Novotic"
}
}
]
}
}
And that concludes today’s post!
Conclusion
Today we saw how to bootstrap an Apollo server to quickly setup GraphQL. We started by looking at how to setup a project with dependencies, we then moved on to defining a simple GraphQL schema definition, then created the resolvers tied to that definition and then create the Apollo server. Lastly we looked at how we could test our code using the Apollo playground by providing a graphql query. I hope you liked this post and I see you on the next one!