T
TanStack•10mo ago
adverse-sapphire

how to mock react query data (in app not in test tiles)?

hey guys, I am mocking some react query data in my landing page like so. The reason I am doing this is because i am using the same components both in my app and in my landing page. However I feel like this is not the correct way of doing it, so I am wondering what you guys think about this and if there is an easier way of doing it ? 
const HomePage =()=>{
  useMockHomePageData();

  return (
    <ComponentThatUsesLotOfUseQuery />
  );
}

const useMockHomePageData = () => {
  const queryClient = useQueryClient();

  const keys = {
    user: userKeys.get.queryKey,
  };

  queryClient.setQueryData(keys.user, userMock);
  queryClient.setQueryDefaults(keys.user, { staleTime: Infinity });

  useEffect(() => {
    return () => {
      queryClient.setQueryDefaults(keys.user, { staleTime: 1000 });
      queryClient.clear();
    };
  }, [queryClient]);
};
const HomePage =()=>{
  useMockHomePageData();

  return (
    <ComponentThatUsesLotOfUseQuery />
  );
}

const useMockHomePageData = () => {
  const queryClient = useQueryClient();

  const keys = {
    user: userKeys.get.queryKey,
  };

  queryClient.setQueryData(keys.user, userMock);
  queryClient.setQueryDefaults(keys.user, { staleTime: Infinity });

  useEffect(() => {
    return () => {
      queryClient.setQueryDefaults(keys.user, { staleTime: 1000 });
      queryClient.clear();
    };
  }, [queryClient]);
};
5 Replies
eastern-cyan
eastern-cyan•10mo ago
What's the useEffect for?
adverse-sapphire
adverse-sapphireOP•10mo ago
it's to mock the data, I also need to clear the query cache when the component is destroy
eastern-cyan
eastern-cyan•10mo ago
This doesn't look reactive/async at all. In that case there's no need for React Query. Why don't you just put the data into an object that you export from somewhere and import where needed? 
export const mockUser = { 
  email: 'foo@bar.com',
  …
}
export const mockUser = { 
  email: 'foo@bar.com',
  …
}
adverse-sapphire
adverse-sapphireOP•10mo ago
Yes you are right, but this component is being used in multiple places in my app. And I also want this component in my landing page. But if i place it in my landing page, it will fire some api calls to my backend, which will fail since there is no user. So therefore I am mocking the user in my landing page as shown above. So that the component does not fire anymore api requests. The problem is that I have no idea if this is the best way of doing it as it is very error prone
reduced-jade
reduced-jade•10mo ago
How often do you expect to need to mock data? If it's on every new feature, I'd recommend putting in the time to setup mswjs.io and https://github.com/jackfranklin/test-data-bot. MSW will allow you to intercept network calls in dev. This is helpful to write real, working Query code but have a bit more flexibility and power when faking the response. Test Data Bot allows you to easily build fake data objects from types (real types or temporary) with a bit more speed and power. Combining the 2 approaches, you can use the Data builders to power your MSW intercepted server calls. It makes for a nice feedback loop to build out a lot of the interactions. If you just need it for this one thing, this one time, you could still use Test Data Bot. Or just wrap your mock user in a promise. So, your queryFn could be () => new Promise(() => Promise.resolve(mockUser)) or something to that effect.

Did you find this page helpful?