如何在graphql-codegen中使用‘`useQueries`’钩子(@tan堆栈/ how query)？

Question

我已经使用graphql-codegen好几个月了，这是一个很好的工具。

我总是和@tanstack/react-query useQuery & useMutation钩子一起使用它。

今天，我想将它与useQueries (文档)一起使用。

为了提供更多的输入，我正在接收相同类型的I的动态(然后是不确定性)列表，我希望通过查询graphql来填充它们。由于递归问题，我不能在服务器上进行重新协商，所以必须在客户机上进行。这就是我需要处理单个查询的原因。这就是为什么我希望我可以使用useQueries。

看起来，与graphql-codegen & useQueries之间没有互操作性。

你确认了吗？

如果是这样的话，您会重新推荐哪种模式来并行运行多个查询？

提前谢谢。

我这里的用例：

import { useQueries } from '@tanstack/react-query';
import { gql } from 'graphql-request';

import { graphQLClient } from '../../graphQLClient';

export const useGetSomeStuff = (ids: string[]) =>
  useQueries({
    queries: ids.map((id) => ({
      queryKey: ['getSomeStuff', id],
      queryFn: async () =>
        graphQLClient.request(
          gql`
            query GetSomeStuff($id: MongoObjectId!) {
              oneStuff(id: $id) {
                ...SomeFragment
              }
            }
          `,
          { id }
        ),
    })),
  });

生成：

export type GetSomeStuffQueryVariables = Exact<{
  id: Scalars['MongoObjectId'];
}>;

export type GetSomeStuffQuery = {
  __typename?: 'Query';
  // ... generated query
};

export const GetSomeStuffDocument = `
    query GetSomeStuff($id: MongoObjectId!) {
  oneStuff(id: $id) {
    ...SomeFragment
  }
}`;
export const useGetSomeStuffQuery = <
  TData = GetSomeStuffQuery,
  TError = unknown
>(
  client: GraphQLClient,
  variables: GetSomeStuffQueryVariables,
  options?: UseQueryOptions<GetSomeStuffQuery, TError, TData>,
  headers?: RequestInit['headers']
) =>
  useQuery<GetSomeStuffQuery, TError, TData>(
    ['GetSomeStuff', variables],
    fetcher<
      GetSomeStuffQuery,
      GetSomeStuffQueryVariables
    >(client, GetSomeStuffDocument, variables, headers),
    options
  );

您可以看到生成的代码仍然使用useQuery。

Answer 1

我是查莉，正在开发GraphQL代码生成器。

我可以确认目前codegen不支持useQueries()。请随意在存储库上提交问题或PR：https://github.com/dotansimha/graphql-code-generator-community/issues/new?assignees=&labels=&template=feature-request.md

Answer 2

作为解决办法，我用手工制作的钩子。

import { useQueries, UseQueryOptions } from '@tanstack/react-query';
import { GraphQLClient } from 'graphql-request';

import {
  GetOneStuffDocument,
  GetOneStuffQuery,
  GetOneStuffQueryVariables,
  Scalars,
} from '@foo/data-access';

function fetcher<TData, TVariables>(
  client: GraphQLClient,
  query: string,
  variables?: TVariables,
  headers?: RequestInit['headers']
) {
  return async (): Promise<TData> =>
    client.request<TData, TVariables>(query, variables, headers);
}

export const useGetSomeStuffQuery = <
  TData = GetOneStuffQuery,
  TError = unknown
>(
  client: GraphQLClient,
  variables: { ids: Scalars['MongoObjectId'][] },
  options?: UseQueryOptions<GetOneStuffQuery, TError, TData>,
  headers?: RequestInit['headers']
) =>
  useQueries({
    queries: variables.ids.map((id) => ({
      queryKey: ['GetSomeStuff', id],
      queryFn: fetcher<
        GetOneStuffQuery,
        GetOneStuffQueryVariables
      >(client, GetOneStuffDocument, { id }, headers),
      options,
    })),
  });

它看起来很管用