🔥 [gql-tag-operations]: Generate gql operations with named operations + query variable types

[Mingyang-Li]

Background

I've been using a number of GraphQL-related tools, but I still haven't found one that allows me to not having to manually write out every GraphQL operation with dynamic query parameters based on the gql schema

🔨🔨 What I'm doing manually

import { gql } from '@apollo/client';

export const CREATE_PERSONAL_INFO = gql`
  mutation CREATE_PERSONAL_INFO($data: PersonalInfoCreateInput!) {
    createPersonalInfo(data: $data) {
      id
    }
  }
`;

export const UPDATE_PERSONAL_INFO = gql`
  mutation UPDATE_PERSONAL_INFO(
    $where: PersonalInfoWhereUniqueInput!
    $data: PersonalInfoUpdateInput!
  ) {
    updatePersonalInfo(where: $where, data: $data) {
      updatedAt
    }
  }
`;

You see, I have a separate /src/graphql/Mutations.ts file dedicated for storing operations to make sure they're reusable, especially when doing refetchQueries on record creation and update type of operations. I'd like to eliminate the manual process for writing out standard crud operation queries and see if there are any plans moving forward with this idea.

Manually writing out operations can be risky especially if your schema has lots of nested fields and advanced filters, like mine. This is why I'm looking for ways to automate the process.

GraphQL schema: https://github.com/Mingyang-Li/VisaPro/blob/main/server/schema.graphql

GraphQL frontend operations: https://github.com/Mingyang-Li/VisaPro/blob/main/client-ui/src/graphql/Mutations.ts