How to handle the same graphql input type variables with different sharp

[hermanho]

Hello, I have a question to extract the variables in the following graphql query.

Example 1:
Query

query GetProduct($criteria: ProductInput!) {
    getProduct(
      criteria: $criteria 
  ) {
      product {
        id
        quantity
      }
    }
  }

Variable

{ 
  criteria: { size: 'M', color: 'Red' }
}

Example 2:
Query

query GetProduct($size: String!, $color: String!) { 
  getProduct(
    criteria: { size: $size, color: $color }
  ) {
    product {
      id
      quantity
      }
    }
  }

Variable

{
  size: 'M', 
  color: 'Red'
}

They are working with the same identical response in real graphql endpoint. However, it will be different when extract the variables in msw graphql handler.

How to parse and extract the input varaiable and work in both queries?

export const handlers = [
  graphql.query('GetProduct', ({ query, variables }) => {
    // const { size, color } = variables
    //     or 
    // const { criteria } = variables
 
    return HttpResponse.json({
      data: {
        user: {
          name: 'John',
        },
      },
    })
  }),
]

[kettanaito]

Hi!

You have multiple options when it comes to GraphQL type safety in general.

1. Provide an explicit query and variables types:

graphql.query<Query, Variables>(...)
//            ^^^^^^^^^^^^^^^^

2. Provide a TypedDocumentNode as the value of the predicate:

import { GetProductQuery } from '../your-type-gen'

graphql.query(GetProductQuery, resolver)
//            ^^^^^^^^^^^^^^^

This implies you're using tools to generate types (and runtime values) from your schema, like GraphQL Type Generator.

MSW itself works on fixed types/values provided as either type arguments (1) or generated values that include query/variable types (2). The library does not do any type extraction itself as it's out of its scope.

I recommend choosing either of this options depending on your current GraphQL setup. Once you do, the variables value in your response resolver argument will be typed as a union of possible options and you will be able to return conditional mocked responses from your handler based on that.

Let me know if you have any other questions!