Generate types client query.

[jangot]

Hello.
I just start to use GraphQL on my server and I am confused with code generator.
Is a way to generate types by my query?

I have config:

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
    schema: 'http://localhost:5555/graphql',
    documents: ['src/**/*.ts'],
    generates: {
        './src/gql/': {
            preset: 'client',
            plugins: ['typescript', 'typescript-operations'],
        },
    },
};
export default config;

I have a code:

import { createClient, defaultExchanges } from '@urql/core';

import config from './config';
import { graphql } from './gql';

export default await function getUser(): Promise<any> {
    const QUERY = graphql(`
        query features {
                featureFlags_GetAllFeatures {
                    features {
                        namespace
                        feature
                    }
                }
            }
    `);
    return createClient({
        url: config.graphobahnUrl,
        exchanges: defaultExchanges,
    }).query(QUERY, {}).toPromise();
};

It generates strange results with many types for a scheme. And I totally don't understand where I can take types for results. I have found dozens of examples of how to generate scheme types but no one creates queries or maybe I don't understand something.
I have no react or other frameworks on my server.
Please help me to find the correct plugin and configuration.

[charlypoly]

Hi @jangot,

First, you will need to fix your configuration by removing the plugins (which should not be used with preset: "client"), as follows:

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
    schema: 'http://localhost:5555/graphql',
    documents: ['src/**/*.ts'],
    generates: {
        './src/gql/': {
            preset: 'client',
            plugins: [],
        },
    },
};
export default config;

Then, you after running graphql-codegen (preferably in watch mode), QUERY will be properly typed.
Finally, remove the Promise<any> return type of your getUser() function to let TypeScript infer the return type from URQL query() call.

[jangot]

Ok, it starts to be more clear. But I still have a question.
Is a way to have types for all parts of my result?
I mean If I want to pass part of the result somewhere and I want to have types for params.
For example:

const USER_QUERY = `query user {
    me {
        id
        pet {
            name
         }
    }
}`

async getUserPet(): Promise<PetType>) {
    const { data } = ...query(USER_QUERY, {}).toPromise();

    return data.me.pet;
}
const pet = await getUserPet();

function preparePet(userPet: PetType) {...}
console.log(preparePet(pet);

What types should I have in preparePet? Do I need to describe it manually?

[charlypoly]

To extract the return type of a Query document, please use the ResultOf<T> type helper exported from @graphql-typed-document-node/core (already installed as a dependency of @graphql-codegen/client-preset):

import React from 'react';
import { useQuery } from '@apollo/client';

import './App.css';
import Film from './Film';
import { graphql } from './gql/gql';
import { ResultOf } from '@graphql-typed-document-node/core';

const allFilmsWithVariablesQueryDocument = graphql(/* GraphQL */ `
  query allFilmsWithVariablesQuery($first: Int!) {
    allFilms(first: $first) {
      edges {
        node {
          ...FilmItem
        }
      }
    }
  }
`);

const result: ResultOf<typeof allFilmsWithVariablesQueryDocument>
//    ^?

result?.allFilms
//        ^?

function App() {
  const { data } = useQuery(allFilmsWithVariablesQueryDocument, { variables: { first: 10 } });
  return (
    <div className="App">
      {data && <ul>{data.allFilms?.edges?.map((e, i) => e?.node && <Film film={e?.node} key={`film-${i}`} />)}</ul>}
    </div>
  );
}

export default App;

[jangot]

Aga, it is much better.
Thank you very much.