GraphQL is an open-source data query and manipulation language that provides a powerful and flexible approach to building APIs. While GraphQL is commonly used on the server-side, it can also be used on the client-side. In this tutorial, we will explore how to use GraphQL with TypeScript on the client-side.


Prerequisites

Before proceeding with this tutorial, you should have a basic understanding of TypeScript, GraphQL, and how to use GraphQL on the server-side. You should also have a basic understanding of React and how to build applications with React.


Setting up the project

To get started, we need to create a new React project. We can use create-react-app to do this. Open up a terminal and run the following command:

npx create-react-app client-side-graphql-typescript --template typescript

This command will create a new React project with TypeScript support.


Next, we need to install the required dependencies. In the terminal, navigate to the project directory and run the following command:

npm install graphql apollo-boost @apollo/react-hooks

We will be using the following dependencies:

  1. graphql: The core GraphQL library.
  2. apollo-boost: A library that provides a set of helpers for building GraphQL clients.
  3. @apollo/react-hooks: A set of React hooks for querying and mutating GraphQL data.


Creating a GraphQL client

Next, we need to create a GraphQL client. We will be using Apollo Client to create our client. Create a new file named apollo-client.ts and add the following code:

import ApolloClient from 'apollo-boost';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
});

export default client;

This code creates a new instance of ApolloClient and sets the GraphQL endpoint to http://localhost:4000/graphql.


Querying data with GraphQL

Now that we have our GraphQL client set up, we can start querying data. Create a new file named App.tsx and add the following code:

import React from 'react';
import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';

const GET_USERS = gql`
  query getUsers {
    users {
      id
      name
      email
    }
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_USERS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {data.users.map((user: any) => (
          <li key={user.id}>
            {user.name} - {user.email}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;


This code defines a GraphQL query named GET_USERS that retrieves a list of users. We use the useQuery hook from @apollo/react-hooks to execute the query and retrieve the data. If the query is still loading, we display a loading indicator. If there is an error, we display an error message. Otherwise, we render the list of users.

Running the application

To run the application, open up a terminal and navigate to the project directory. Run the following command to start the development server: 

npm start

This will start the development server and open up the application in your default browser.


Conclusion

In this tutorial, we explored how to use GraphQL with TypeScript on the client-side. We created a new React project with TypeScript support and installed the necessary dependencies. We then created a GraphQL client using Apollo Client and queried data using the useQuery hook from @apollo/react-hooks. Finally, we ran the application and saw the list of users being rendered on the screen.

This is just the beginning of what you can do with GraphQL and TypeScript on the client-side. You can create mutations to update data, subscriptions to receive real-time updates, and much more. Additionally, you can use TypeScript to ensure type safety and prevent common errors in your code.

I hope you found this tutorial helpful and that it gives you a good starting point for working with GraphQL and TypeScript on the client-side. Happy coding!