Subscribing to query from custom hook

[mo-lon]

Hi
I am starting with tanstack query and have the following setup with a custom hook that accept two params which are used as dynamic query keys

export const useReleaseData = (from?: string, to?: string) => {
  const releaseQuery = useQuery<Release>({
    queryKey: ['release', { from, to }],
    queryFn: getRelease,
    enabled: !!from && !!to,
  });
  return releaseQuery;
};

// Component A
const [from, setFrom] = useState('development');
const [to, setTo] = useState('production');
const { isLoading } = useReleaseData(from, to);

// Component B
const { data } = useReleaseData();

I was assuming data in component B would update in response to state changes in component A. I could lift the state/setters to a parent but wanted to know if I'm missing anything.

[TkDodo]

if you don't pass from and to to ComponentB, you are not observing the same cache entry in both components. You need access to from and to in components that want to read data from that cache entry.

I could lift the state

This is the way. You need to make the client state accessible where you want to read server state that depends on it.