Introduction to GraphQL with TypeScript

GraphQL is a query language for APIs that was developed by Facebook. It provides a more efficient, powerful, and flexible alternative to traditional REST APIs. With GraphQL, you can specify exactly what data you need, and get only that data in a single request.

In this tutorial, we will be focusing on how to use GraphQL with TypeScript. TypeScript is a strongly typed superset of JavaScript, which helps catch errors at compile time rather than runtime. Combining GraphQL with TypeScript can help ensure that the queries and resolvers are working correctly.

Installation

First, we need to install the necessary packages. We can use npm or yarn to do this.

npm install graphql apollo-server-express express
// OR
yarn add graphql apollo-server-express express

Setting up the server

Next, we'll set up the server with ApolloServer and Express. Create a new file called server.ts.

import { ApolloServer } from "apollo-server-express";
import express from "express";

const app = express();

const server = new ApolloServer({});

server.applyMiddleware({ app });

app.listen({ port: 4000 }, () =>
  console.log(`Server ready at http://localhost:4000${server.graphqlPath}`)
);

We import ApolloServer and express. We create an instance of express and an instance of ApolloServer. We then call applyMiddleware on the server instance to connect it to our express app. Finally, we start the server by calling listen.

Now if you run npm start (or yarn start), you should see the following message in your console:

Server ready at http://localhost:4000/graphql

Creating a schema

Now that the server is set up, we need to create a schema. A schema defines the types, queries, and mutations that can be used in our API.

import { gql } from "apollo-server-express";

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

export { typeDefs };

We import gql from apollo-server-express. We then define a Query type with a single field called hello that returns a String. We export typeDefs so that it can be used by the server.

Adding resolvers

Next, we need to add resolvers that will provide the data for our queries. Create a new file called resolvers.ts.

const resolvers = {
  Query: {
    hello: () => {
      return "Hello from GraphQL!";
    },
  },
};

export { resolvers };

We define a Query resolver for the hello field. When the hello field is queried, it will return the string "Hello from GraphQL!".

Connecting the schema and resolvers to the server

In the server.ts file, we need to import our typeDefs and resolvers and connect them to the ApolloServer instance.

import { ApolloServer } from "apollo-server-express";
import express from "express";
import { typeDefs } from "./typeDefs";
import { resolvers } from "./resolvers";

const app = express();

const server = new ApolloServer({ typeDefs, resolvers });

server.applyMiddleware({ app });

app.listen({ port: 4000 }, () =>
  console.log(`Server ready at http://localhost:4000${server.graphqlPath}`)
);

We import the typeDefs and resolvers from their respective files. We then pass them as options to the ApolloServer constructor.

Testing the API

Now that the server is set up, we can test our API using GraphQL Playground.

1. Open your web browser.
2. Navigate to http://localhost:4000/graphql.
3. Run the following query:

query {
  hello
}

You should see the following result:

{
  "data": {
    "hello": "Hello from GraphQL!"
  }
}

Congratulations, you have successfully created a GraphQL API with TypeScript! This is just the beginning of what you can do with GraphQL. There are many more features to explore and integrate with, including real-time subscriptions, schema stitching, and federation.