How to get typed data from Craft using GraphQL, TypeScript (and codegen)

[thomasjonas]

I'm in the process of upgrading a headless Craft 4 project to Craft 5. As expected there have been quite some changes, and I had to update all my GraphQL queries. It took some time to figure out the name of all the new matrix blocks entries, but that all worked out.

In my Craft 4 project I have been using codegen to automatically create TypeScript types from my queries. That way I get nice autocomplete integration with VSCode and (when it works) it really improves the developer experience.

What I noticed though was that the number of Craft entry types went from 23 (in Craft 4) to 67 in Craft 5. This might not seem that big of a deal, but the generated code (that VSCode uses for autocompletion) also almost in size (it's now totals around 22mb where it was 8mb). This makes autocomplete really slow (even on a MBP M1 Max) and unusable.

I think the graphql schema that is generated by Craft CMS could be a bit smarter. For instance, when I ran a query like this:

query publication {
  entry(section: "publications") {
    title
    slug
    uri
    __typename
    ... on text_Entry {
      id
    }
    ... on event_Entry {
      id
    }
  }
}

I would like __typename to be either text_Entry or event_Entry. But according to the GraphQL schema it can be any of my 67 entry types. Even though it already knows I'm only querying from the publications sections, and only want 2 entry types. I know I can type guard, or extract types, but with 67 entry types that becomes painfully slow to do. In my Craft 4 project I extracted the correct types like this, but with removing the section prefix from the typename that doesn't work anymore:

export type PublicationQueryResult = Extract<
	NonNullable<PublicationQuery['entry']>,
	{
		__typename: `publication_${string}_Entry`
	}
>

So what I'm basically asking, is there a better way to get typed data from Craft CMS?

[thomasjonas]

A work around to get the right types returned (or at least only the types within a section) when querying for a single entry is not to use the entry query, but to use the entries query for my section (in of a publications section I could use the publicationsEntries).

[brandonkelly]

The entry types included in the schema will depend on which sections are included. If you can do with out some sections, exclude them from your schema settings and the entry type count should go down.

There are more entry types in Craft 5 because any of your Matrix block types in Craft 4 are entry types now. It should be a mostly-lateral move though.

Even though it already knows I'm only querying from the publications sections, and only want 2 entry types.

We don’t know this at the point when the schema is being built out, which needs to be ready to handle any possible query that could execute against it.

[howells]

@thomasjonas have you since found a way to get this to work better for you? I'm really struggling to work with the vast codegen'd schemas, and makes working with Craft in my pretty much exclusively typescript workflow more and more of a hassle...

[brandonkelly]

@howells have you tried @thomasjonas’s suggestion to use the section-specific queries (e.g. newsEntries) instead of entries?

[howells]

Yeah I was but it still produced a schema which was about 40-60mb big which just killed VS Code (it's a somewhat big site). I've stripped it out of this project for time's sake, will have to revisit it.