📂

Monorepo: Automated Types Generation in Frontends

Introduction

This guide will help you set up and use the Graphweaver SDK to generate typed queries and mutations for your frontend applications. The SDK simplifies interactions with the Graphweaver API, making your development process more efficient and streamlined.

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.

Read on to discover how Graphweaver simplifies the process of integrating GraphQL queries and mutations into your client applications while preserving type safety, especially in a monorepo structure.

Types Generation during Build

  • Automatic Types Generation: The build-time process analyses the GraphQL schema and associated resolvers, extracting relevant information for generating client-side code.
  • Monorepo Support: 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.

/* 
* This file is auto-generated by Graphweaver. 
* Please do not edit it directly.
*/
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:

// Posts.tsx
import { POSTS_QUERY } from './graphql';
import { useQuery } from '@apollo/client';
import { PostsQuery } from './graphql.generated';

export const Posts = () => {
  const { loading, error, data } = useQuery<PostsQuery>(POSTS_QUERY);

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <table>
      <thead>
        <tr>
          <th>title</th>
          <th>body</th>
          <th>userId</th>
        </tr>
      </thead>
      <tbody>
        {data?.posts.map((item) => {
          return (
            <tr key={item.id}>
              <td>{item.title}</td>
              <td>{item.body}</td>
              <td>{item.userId}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};

Usage in Vue Client

Similarly, for Vue clients, include the generated graphql.generated.ts file:

/* 
* This file is auto-generated by Graphweaver. 
* Please do not edit it directly.
*/
import gql from 'graphql-tag';

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

export { POSTS_QUERY };

You can then use the typed query in your Vue components:

<!-- App.vue -->
<script setup lang="ts">
import { POSTS_QUERY } from './graphql';
import { type PostsQuery } from './graphql.generated';
import { useQuery } from '@vue/apollo-composable'

const { result, loading, error } = useQuery<PostsQuery>(POSTS_QUERY);
</script>

<template>
  <p v-if="error">Something went wrong...</p>
  <p v-if="loading">Loading...</p>
  <p v-else v-for="post in result?.posts" :key="post.id">
    {{ post.title }} {{ post.id }}
  </p>
  <div></div>
</template>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

GitHub Repository

For a complete example, check out the Graphweaver Example Monorepo.

Exogee