Skip to main content

GraphQL schema validation using TypeScript

To validate application code against a GraphQL schema in TypeScript, you typically follow these steps:

  1. Fetch the GraphQL Schema: You need to download the GraphQL schema from the given URL.

  2. Generate TypeScript Types: Use a tool like GraphQL Code Generator to convert your GraphQL schema into TypeScript types. This helps in type-checking your application code against the schema.

  3. Validate Queries and Mutations: Use the generated TypeScript types to validate GraphQL queries and mutations in your codebase. This can be done statically at compile time or dynamically at runtime, depending on your setup.

Below is an example process that demonstrates these steps, assuming you have a Node.js environment set up and are comfortable using npm or yarn for package management:

Step 1: Install required tools​

Install GraphQL Code Generator and its relevant plugins via npm or yarn:

npm install -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations graphql

Or if you're using yarn:

yarn add -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations graphql

Step 2: Configure GraphQL code generator​

Create a configuration file for GraphQL Code Generator, codegen.yml, specifying the path to your GraphQL schema and the output for the generated TypeScript types:

overwrite: true
schema: "http://api-schema-doc.s3-website-eu-west-1.amazonaws.com/schema-staging.json"
generates:
  src/generated/graphql.ts:
    plugins:
      - "typescript"
      - "typescript-operations"

Step 3: Generate TypeScript types​

Run GraphQL Code Generator to generate TypeScript types from your GraphQL schema:

npx graphql-codegen

This will generate TypeScript types in the path specified in your codegen.yml file.

Step 4: Use Generated Types in Your TypeScript Code​

Now, you can use the generated TypeScript types to type-check your GraphQL queries and mutations. For example, if you have a query named GetUser, the generator might produce a type named GetUserQuery. You can use this type in your TypeScript code to ensure your query conforms to the schema.

import { GetUserQuery } from './src/generated/graphql';

// Example function that might use the generated types
function fetchUserData(query: GetUserQuery) {
  // Implementation that uses the query
}

This process ensures that your application's queries and mutations are valid according to your GraphQL schema. Any discrepancies between your code and the schema will be caught by TypeScript's type system, helping you to identify and resolve issues more efficiently.

Remember, the above steps assume you have a basic understanding of Node.js, npm/yarn, and TypeScript. Adjustments may be necessary based on your specific project setup and requirements.