Скачать или смотреть How to Retrieve Subtypes in GraphQL with @graphql-codegen/cli

Learn how to use `@graphql-codegen/cli` to extract specific node types from your GraphQL queries, enhancing your TypeScript projects with precise typing.
---
This video is based on the question https://stackoverflow.com/q/74811628/ asked by the user 'Trung Modern Coding' ( https://stackoverflow.com/u/13631414/ ) and on the answer https://stackoverflow.com/a/74885349/ provided by the user 'Gil Gardosh' ( https://stackoverflow.com/u/19328934/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: get sub types in graphql query using @graphql-codegen/cli

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Retrieve Subtypes in GraphQL with @graphql-codegen/cli

When working with GraphQL, especially in TypeScript, ensuring that your types are correct and that you can easily manage them can sometimes be a challenge. One common issue developers face is related to the GraphQL Code Generator, often abbreviated as @graphql-codegen/cli. It's designed to automate the generation of types based on your GraphQL schema, but it might not always generate the specific types you need.

In this guide, we will explore how to effectively retrieve subtypes from GraphQL queries using @graphql-codegen/cli. We'll break down a specific scenario involving a GraphQL query for custom fields, focusing on obtaining the node types.

The Problem: Missing NodeType

Let's consider the following GraphQL query where we're retrieving custom fields from an advert. The structure of the query looks like this:

[[See Video to Reveal this Text or Code Snippet]]

In this case, you might want to filter these nodes based on whether the user can read them (canRead), and you also need a TypeScript type to represent these nodes without manually creating a type.

Upon inspecting your configuration, you may realize that @graphql-codegen/cli does not export a standalone type for NodeType, which is crucial for your app's type safety.

The Solution: Extracting NodeType

Even though @graphql-codegen/cli doesn’t generate every possible type, you can derive the necessary type from the generated operation type. Here’s how you can do it effectively:

Step 1: Understanding the Generated Types

By default, when you use @graphql-codegen/cli, it generates types based on your GraphQL schema. However, it won't create a separate type for specific elements like nodes. Instead, you can extract the type directly from the query operation.

Step 2: Writing the Type Definition

To define the NodeType, you need to extract it using the following code:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Utilizing the NodeType in Component

Now that you have defined the NodeType, you can use it throughout your React component. Below is an example of a React functional component that fetches and utilizes this type correctly:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

With just a few adjustments, you can efficiently extract and utilize subtypes in your GraphQL queries. By defining the NodeType based on your generated types, you enhance the type safety of your application without needing extra definitions. This method not only simplifies your code but also ensures that you leverage the power of TypeScript fully.

By following the above instructions, you should be equipped to resolve issues concerning subtype generation using @graphql-codegen/cli. Happy coding!