TypeScript and GraphQL: Practical Code Examples

Understanding TypeScript and GraphQL

TypeScript is a superset of JavaScript that adds static typing, making your code more predictable and easier to debug. GraphQL, on the other hand, is an API query language that allows clients to request only the data they need. Combining these two technologies can lead to more robust applications.

Setting Up a GraphQL Server with TypeScript

To start, let’s set up a basic GraphQL server using TypeScript and Apollo Server. If you haven’t already, install the necessary packages:

npm install apollo-server graphql typescript ts-node @types/node --save-dev

Creating a Simple GraphQL Server

Create a file named server.ts and add the following code:

import { ApolloServer, gql } from 'apollo-server';

// Define your GraphQL schema using SDL
const typeDefs = gql`
  type Query {
    hello: String
  }
`;

// Provide a resolver for the schema
const resolvers = {
  Query: {
    hello: () => 'Hello, World!',
  },
};

// Create an Apollo Server instance
const server = new ApolloServer({ typeDefs, resolvers });

// Start the server
server.listen().then(({ url }) => {
  console.log(`🚀  Server ready at ${url}`);
});

Running the Server

To run your server, execute the following command:

ts-node server.ts

You should see a message indicating that the server is running. Open your browser and navigate to the URL provided in the console to access the GraphQL Playground.

Defining Types with TypeScript

Using TypeScript’s type definitions can help ensure that your GraphQL schema aligns with your data models. Here’s how to define a type for a User:

interface User {
  id: string;
  name: string;
  email: string;
}

Updating the GraphQL Schema

You can update your GraphQL schema to include the User type:

const typeDefs = gql`
  type User {
    id: ID!
    name: String!
    email: String!
  }

  type Query {
    users: [User]
  }
`;

Adding Resolvers for Queries

Now, let’s add a resolver to return a list of users:

const users: User[] = [
  { id: '1', name: 'Alice', email: 'alice@example.com' },
  { id: '2', name: 'Bob', email: 'bob@example.com' },
];

const resolvers = {
  Query: {
    users: () => users,
  },
};

Performing Queries

You can now perform a query to retrieve users in the GraphQL Playground:

query {
  users {
    id
    name
    email
  }
}

The result should look like this:

{
  "data": {
    "users": [
      { "id": "1", "name": "Alice", "email": "alice@example.com" },
      { "id": "2", "name": "Bob", "email": "bob@example.com" }
    ]
  }
}

Conclusion

In this article, we’ve covered the basics of setting up a GraphQL server with TypeScript, defining types, and executing queries. By leveraging TypeScript’s type system, you can create a more maintainable and reliable codebase when working with GraphQL.

Mastering TypeScript with GraphQL: Practical Examples