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

Question

I am working on migrating my app to react-query from apolloclient. With apolloclient, I am mocking the schema like it's shown here. Here's what that looks like:

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)];
          },
        },
      },
    },
  },
});

Then, in the query for posts, I can just add @client after the user field and it will run the read function specified above and return the value for that field while the other fields will have the data from the backend.

I haven't been able to find any information on how to do something similar with react-query. Is it even possible?

Answer 1

react-query is not a graphql specific library, so any schema related things cannot be handled by it. react-query basically wants a resolved or rejected Promise returned from the queryFn - that's it.

So maybe this question is more related to the library that you actually use the make the graphql request, like graphql-request or maybe urql-core?

What you can always do is amend the data inside the queryFn after it was fetched, but before it was returned from useQuery. If you take a look at the graphql basic example from the docs, you could do:

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

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