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.

[JustinGrote]

Sorry to necro but just wanted to note the lint rule helped me a lot. Question: If I do this, can I remove the enabled: dependentQuery.isSuccess from my dependent query? I'm wondering on initial load if it will see the data isn't populated and will wait or not.

[JustinGrote]

Also this makes the devtools a huge mess, if I pick like one dependent key is that enough?

EDIT: Since the query is styleable I applied some amateur style to fix the wrap problem. Probably a better way to do this but it works good enough.

.tsqd-queries-overflow-container {
	overflow-x: auto;
	white-space: nowrap;
	flex: content;
	max-width: 70vw
}