我在 msw 的 GraphQL 模拟中定义了响应，但在使用 GraphQLCodegen 自动生成的 hooks 中无法识别

• やろうとしたこと: 料理の登録

• どうやろうとしたか

構成

フロントエンドでReactを利用
GraphQLでフロントとバックをつないでいる

フロントエンド側のクライアントはApollo
コンポーネントからはGraphQLCodegenで生成したApollo経由のReactHookでGraphQLと通信している

jestでテストする上で、mswでGraphQLをモックしてテストをしようと思っていた。

我想模拟的query定义如下

gql`
  query dishes($searchString: String) {
    dishes(searchString: $searchString) {
      id
      name
      mealPosition
      comment
    }
  }
`;

以下是一些成功的案例。

  const resposeData = {
      dishes: [
        {
          __typename: 'Dish',
          id: 1,
          name: '生姜焼き',
          mealPosition: 2,
          comment: null,
        },
      ],
    }
  const queryInterceptor = jest.fn();
  const handler = graphql.query(DishesDocument, (req, res, ctx) => {
    execVariables.push(req.variables);
    queryInterceptor();
    return res(ctx.data(resposeData));
  });
  server.use(handler);

以下是一个失败的例子

  const resposeData = {
      dishes: [
        {
          id: 1,
          name: '生姜焼き',
        },
      ],
    }
  const queryInterceptor = jest.fn();
  const handler = graphql.query(DishesDocument, (req, res, ctx) => {
    execVariables.push(req.variables);
    queryInterceptor();
    return res(ctx.data(resposeData));
  });
  server.use(handler);

由于在测试中只使用了id和name，所以只进行了最基本的定义，结果导致响应如下。

data: { dishes: [ {} ] },

看起来在当前的配置中，似乎需要定义__typename以便让它能够被识别。
此外，像comment之类的值可能是nullable的，但是如果仅设置为null或未定义的状态，会出现警告，让人感到烦恼。