是否可以像 apolloclient 那样在反应查询中模拟 GaphQL 请求中的模式字段？

Question

我正在努力将我的应用程序迁移到来自 apolloclient 的 react-query。使用 apolloclient，我正在模拟显示的模式 here。这是它的样子：

const users = [
  {
    name: "user1name",
    image: "https://user1image.jpg",
  },
  {
    name: "user2name",
    image: "https://user2image.jpg",
  },
  {
    name: "user3name",
    image: "https://user3image.jpg",
  },
  {
    name: "user4name",
    image: "https://user4image.jpg",
  },
];

const cache = new InMemoryCache({
  typePolicies: {
    Post: {
      fields: {
        user: {
          read() {
            return user[Math.floor(Math.random() * people.length)];
          },
        },
      },
    },
  },
});

然后，在查询帖子时，我可以在用户字段后添加 @client，它将运行上面指定的 read 函数和 return该字段的值，而其他字段将具有来自后端的数据。

我无法找到有关如何使用 react-query 执行类似操作的任何信息。有可能吗？

Answer 1

react-query 不是 graphql 特定的库，因此它无法处理任何与模式相关的事情。 react-query 基本上想要从 queryFn 返回一个已解决或被拒绝的 Promise - 就是这样。

所以这个问题可能与您实际使用的库有关，比如 graphql-request or maybe urql-core?

您始终可以做的是在 queryFn 中获取数据后但在从 useQuery 返回之前修改数据。如果你看一下 graphql basic example from the docs，你可以这样做：

useQuery("posts", async () => {
  const {
    posts: { data },
  } = await request(
    endpoint,
      gql`
        query {
          posts {
            data {
              id
              title
            }
          }
        }
      `
  );

  return {
    ...data,
    someOtherField: myMockedOtherFieldData };
  }
});

是否可以像 apolloclient 那样在反应查询中模拟 GaphQL 请求中的模式字段？

Is it possible to mock schema fields in GaphQL request in react-query like apolloclient does it?

reactjs

graphql

apollo-client

react-query