Refetching of dependent queries

[JakubGIT]

There was already a discussion about that, but unfortunately the solution doesn't work for me.

The thing is:

• query1 is fetching and providing some data
• query 2 uses data from query 1 to fetch another piece of data

What I want to have

• query 2 refetches if the data from query1 have changed

Sandbox

• link to sandbox
• here you can find a working example using useEffect() to achieve that

  const result1 = useQuery({
    queryFn: async () => {
      await new Promise((r) => setTimeout(r, 500));
      return data1;
    },
    queryKey: ["query", "1"],
  });
  
  const key = result1.data;
  
  const result2 = useQuery({
    queryFn: () => data2[key],
    queryKey: ["query", "2"],
    enabled: !!key,
  });
  
  useEffect(() => {
    result2.refetch();
  }, [result1.data]);

• when I change the source data and refetch query 1, the query 2 refetcher too and the value displayed changes
• is there any way to achieve this without useEffect()? When I comment out the useEffect(), the only way to get the new data into the DOM is to refetch query 1 and then to refetch query 2
• why do I have no luck when invalidating or refetching all queries? The buttons triggering refetching practically don't change anything

Many thanks

[TkDodo]

query 2 refetches if the data from query1 have changed

then data from query1 needs to be part of the queryKey of query2. We have a lint rule that enforces this, I guess you aren't using it?

[JakubGIT]

Thanks a lot and sorry for the late reply. Yes, that works.

I tried to integrate the linter once and somehow it didn't work - or there was nothing to lint, but I guess I didn't setup the eslint file correctly. I'll give it a try once more again.