Introduction

This guide will help you set up and use the Graphweaver SDK to generate typed queries and mutations for your frontend applications.

Without typed queries and mutations, developers often have to wrap Partial<> around the data returned to accommodate the dynamic nature of GraphQL responses.

Unfortunately, this workaround results in a loss of type-safety, making it challenging to catch errors during development and hindering the benefits of TypeScript. With Graphweaver, you can enjoy a streamlined development experience by automatically generating type-safe client SDKs during the build process.

If your web-app clients sit outside the Graphweaver folder in a monorepo, follow the setup instructions provided below.

Frontend Types Generation Setup

To configure Graphweaver to watch for file changes in your monorepo, modify the watchForFileChangesInPaths to include the paths to your frontends in your Graphweaver project file as follows:

/* graphql-api Graphweaver Project */
import 'reflect-metadata';
import Graphweaver from '@exogee/graphweaver-server';
import { resolvers } from './schema';

export const graphweaver = new Graphweaver({
  resolvers,
  fileAutoGenerationOptions: {
    watchForFileChangesInPaths: ['../../apps/web-app'],
  },
});

export const handler = graphweaver.handler();

To generate the typed files, run the following script:

> graphweaver watch

Usage in React Client

After running the script, you will notice that graphql.generated.ts is generated next to your graphql.ts file.

//graphql.ts
import { gql } from '@apollo/client';

const POSTS_QUERY = gql`
  query posts {
    posts {
      id
      title
      body
      userId
    }
  }
`;

export { POSTS_QUERY };

You can now use the typed query in your React components: