Typescript with Graphql request in Apollo Client

By Sahil Kapoor

A match made in heaven!

In Apollo client, we can make a Graphql request using 2 methods (completely ignoring the classes 😛), by using hooks and by directly using the client.

Types in useQuery and useMutation:

function useQuery<TData = any, TVariables = OperationVariables>(query: DocumentNode, options?: QueryHookOptions<TData, TVariables>): QueryResult<TData, TVariables>

useQuery is a generic function that accepts TData and TVariables. TData describes the type of data returned by the query and TVariables describes the type of variables passed to the query.

const GET_FILES = gql`
  query Files($q: String, $timeFrom: String, $timeTo: String) {
    files(q: $q, timeFrom: $timeFrom, timeTo: $timeTo) {
      id
      name
      thumbnails {
        thumbnail_512
        thumbnail_256
      }
    }
  }
`;
// This is TData
interface GetFilesData { 
  files: {
    id: string;
    name: string;
    thumbnails?: {
      thumbnail_512: string;
      thumbnail_256: string;
    };
  }[];
}
// This is TVariable
interface GetFilesVars { 
  q: string;
  timeFrom: string;
  timeTo: string;
}
const RenderFiles = () => {
  const { loading, error, data } = useQuery<GetFilesData, GetFilesVars>(GET_FILES);
  return <div></div>;
};

The usage is exactly the same in useMutation.

Types in client.query and client.mutation:

Let us first define the Apollo client:

import { ApolloClient } from '@apollo/client';
const httpLink = new HttpLink({
  uri: process.env.API_HTTP_URL
});
return new ApolloClient({ link: httpLink });

Using Apollo client:

// import client and others here
const GET_FILES = gql`
  query Files($q: String, $timeFrom: String, $timeTo: String) {
    files(filters: { q: $q }, timeFrom: $timeFrom, timeTo: $timeTo) {
      id
      name
      thumbnails {
        thumbnail_512
        thumbnail_256
      }
    }
  }
`;
// This is TData
interface GetFilesData { 
  files: {
    id: string;
    name: string;
    thumbnails?: {
      thumbnail_512: string;
      thumbnail_256: string;
    };
  }[];
}
// This is TVariable
interface GetFilesVars { 
  q: string;
  timeFrom: string;
  timeTo: string;
}
const NewsMakerReports = (): ReactElement => <div></div>;
FilesPage.getInitialProps = async (): Promise<GetFilesData> => {
  const res = await client.query<GetFilesData, GetFilesVars>({
    query: GET_FILES,
    variables: { q: '', timeFrom: '22-12-2020', timeTo: '24-12-2020' }
  });
return res.data;
};

Obviously, using it has the same benefits as mentioned above and there’s no difference in using it with client.mutation.

Having types in the Graphql requests makes life so easy and worry-free, as we get no runtime errors, we only get typescripts errors if we pass the wrong variables or use the data differently, like if we try to access a key that we haven’t defined, or we try to pass the data to a function with different types, etc.

Other benefits are no more going back to Graphql playground again and again to check the types, no more guesses in variables, no more autocomplete and hints when using the result and variables.

You can read more in the official documentation here.