Typescript error when using Apollo client to make SSR requests with NEXTJS

[captDaylight]

Using the plugin typescript-react-apollo has generally been a breeze. However, in some scenarios I can't use the generated hooks and need to use NextJS's getStaticProps function to fetch data at build time.

For example, imagine I want to grab products at build. In getStaticProps I won't be using the generated hook useGetProductsQuery, rather the query document and request result. I can grab these types from codegen's generated types: GetProductsQueryResult and GetProductsDocument.

export const getStaticProps = async () => {
  const client = ApolloClient();

  const { data }: GetProductsQueryResult = await client.query({
    query: GetProductsDocument,
    variables: {
      limit: 10,
    },
  });
  // ...
}

However, the const { data } = ... line is returning a typescript error:

Type 'ApolloQueryResult' is missing the following properties from type 'QueryResult { limit?: InputMaybe  | undefined; }>>': client, observable, called, variables, and 7 more.

I can see the other variables that the error is referencing on QueryResult, however ApolloQueryResult seems to be the return type on client.query.

The generated Apollo query looks like:

export type GetProductsQueryResult = Apollo.QueryResult<GetProductsQuery, GetProductsQueryVariables>;

Shouldn't this be ApolloQueryResult not QueryResult? Am I approaching this wrong?

[charlypoly]

Hi @captDaylight,

I would suggest you use a simpler setup that is well integrated with the Apollo client: the typed-document-node plugin.

By using this plugin, you will get typed GraphQL documents (ex: GetProductsDocument) that work natively with Apollo and most GraphQL clients.

[captDaylight]

Hi @charlypoly, thanks for the advice. However, with my current setup I'm already generating the GetProductsDocument. My issue was I was importing the wrong thing from the generated file, instead of GetProductsQueryResult it should have been GetProductsQuery

So for example this instead:

// ...
import type { GetProductsQuery } from 'yadayada/generated/graphql';
import { GetProductsDocument } from 'yadayada/generated/graphql';

export const getStaticProps = async () => {
  const client = ApolloClient();

  const { data } = await client.query<GetProductsQuery>({
    query: GetProductsDocument,
    variables: {
      limit: PRODUCTS_PAGE_LIMIT,
    },
  });
  // ...
}

Now there errors are gone 🎉