How to prevent certain generated GraphQL types from being required?

[ktaftaf]

I have a gql query that looks like:

  query GetPageProps($slug: String!) {
    thisPage: pageCollection(limit: 1, where: { slug: $slug }) {
      items {
        modulesCollection(limit: 8) {
          items {
            ... on HeroCategory {
              __typename
              sectionImagesCollection
              sectionHeading
            }
          }
        }
      }
    }
  }

The generated types for that module seems to expect certain values, namely sys and contentfulMetadata.

export type HeroCategory = Entry & {
  __typename?: 'HeroCategory';
  contentfulMetadata: ContentfulMetadata;
  linkedFrom?: Maybe<HeroCategoryLinkingCollections>;
  sectionImagesCollection?: Maybe<AssetCollection>;
  sectionHeading?: Maybe<Scalars['String']>;
  sys: Sys;
};

and just to name a few more, Entry is doing the same:

export type Entry = {
  contentfulMetadata: ContentfulMetadata;
  sys: Sys;
};

and AssetCollection with limit, skip, and total:

export type AssetCollection = {
  __typename?: 'AssetCollection';
  items: Array<Maybe<Asset>>;
  limit: Scalars['Int'];
  skip: Scalars['Int'];
  total: Scalars['Int'];
};

As a workaround Im making those values optional:

export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;

export type HeroCategoryProps = Optional<
  HeroCategory,
  'contentfulMetadata' | 'sys'
>;

Im only doing this for the top level HeroCategory. Id still need to manually pick the AssetCollection, Asset, and Entry types, at which point it feels a bit messy.

My config:

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

const endpoint = `https://graphql.contentful.com/content/v1/spaces/${process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID}/environments/${process.env.NEXT_PUBLIC_CONTENTFUL_ENV}`;

const config: CodegenConfig = {
  schema: [
    {
      [endpoint]: {
        headers: {
          Authorization: `Bearer ${process.env.NEXT_PUBLIC_CONTENTFUL_CONTENT_DELIVERY_API}`,
        },
      },
    },
  ],
  documents: ['**/*.tsx'],
  generates: {
    './src/gql/': {
      preset: 'client',
    },
  },
};

export default config;

Does anyone know a more elegant workaround to this? Or perhaps something is wrong with my setup?

[claus]

@ktaftaf I'm having the same issue, did you by chance find out how to elegantly solve this?

[ktaftaf]

No, unfortunately i just ended up making those optional manually.

[ekcrisp]

We chose to use NonNullable so that we could drill into the keys from the generated query type (instead of the schema type). I think this only works if you're using codegen with react query plugin. In your case it would be something like

type HeroCategoryProps = NonNullable<NonNullable<NonNullable<GetPagePropsQuery["pageCollection"]>["items"][0]>["modulesCollection"]>["items"][0]

if you get past the ridiculous looking syntax it's basically just getting they type for the key you need within the query, this is also specific to the query you write and won't have other keys you're not pulling in defined on the type which can be a pro or a con depending on how you're using them.

[svandersteene]

Having the same issue here, it's type-hell we're talking about here. However, codegen does export its own MakeOptional type which dives deep into the schema.

Code snippet :

const pageMapper = (
    data: Maybe<MakeOptional<ContentPage | Resource, "contentfulMetadata" | "sys">>,
): void => {
    console.log("page mapper", data); //eslint-disable-line
};

You can import all these types from the generated sdk. Maybe<T> handles possible null , whilst MakeOptional<T, K extends keyof T> handles the issues with contentfulMetadata & sys.