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:
// 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:
//graphql.ts
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.