Query API using GraphQL, Apollo and TypeScript

Objectives

Discover how to leverage GraphQL for API querying and establish a GraphQL server utilizing Apollo.

Tech Stack

Setup the starter project

I will use the starter project provided by Apollo for this blog post.

First, clone the repository:

git clone -b typescript https://github.com/apollographql/odyssey-lift-off-part1
  • The backend app is located in the server/ directory.
  • The frontend app is located in the client/ directory.

In this blog post, we will only utilize the backend part.

Then, install all the required npm packages:

cd server && npm install

Intro to GraphQL

What is GraphQL

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. To learn more about GraphQL, I recommend you to read the GraphQL official documentation.

What is GraphQL schema

The GraphQL schema acts as a blueprint for the data available in the API and describes how clients can interact with it. It outlines the types of data that can be queried and manipulated and the relationships between them. The schema provides a unified interface for clients to request specific data requirements and receive predictable responses. To learn more about GraphQL schemas, I recommend you to read the GraphQL official documentation about Schemas and Types.

Build our schema

To get started with our schema, 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 the gql template literal that we'll use later on. 
npm install @apollo/server graphql graphql-tag

A schema with three types: Query, User, Address

These are the data types we'll be able to retrieve from the backend. To learn more about schemas and types, check out this documentation.

What is gql?

It's a tagged template literal, used for wrapping GraphQL strings like the schema. This converts GraphQL strings into the format that Apollo libraries expect when working with operations and schemas, and it also enables syntax highlighting.

Populate mock data

Here we utilize this JavaScript package: casual to generate mock data.

Create a GraphQL server

The purpose of building the backend

  • 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

Let's walk throug the code:

  • Import the typeDefs variable, which contains the GraphQL schema definition.
  • Import the mocks variable, which contains the mock data we populated in the previous step.
  • Define an asynchronous function startApolloServer() to start the Apollo Server.
  • Inside startApolloServer(), create a new Apollo Server instance with a schema that includes mocks using addMocksToSchema().
  • Start a standalone server using startStandaloneServer() with the created Apollo Server instance.
  • Call the startApolloServer() function to start the server.

Apollo Explorer

What is Apollo Explorer?

Also known as The GraphOS Studio Explorer. It is a powerful web IDE for creating, running, and managing GraphQL operations.

Start running your server

npm run dev

You will find the server running on http://localhost:4000/. And you should see something like this on the browser:

In the Apollo Explorer, the middle panel allows you to structure your query according to your preferences in order to obtain the desired output. The right panel shows the result of the query. The left panel shows the schema of the server. It is a great tool to use when you are developing your GraphQL server. This is my top two used tools besides Postman for API development.

To learn more about how Apollo Explorer works checkout their documentation.

Conclusion

  • Apollo simplifies GraphQL development by providing a comprehensive set of tools and libraries that streamline the process.
  • Apollo Explorer allows developers to explore and interact with the GraphQL schema, making it easier to build and test queries.

Source