What are the advanced features of React Query, such as dependent queries, parallel queries, and window focus refetching?

React Query offers many advanced features that make data management more flexible and powerful:

1. Dependent Queries

Dependent queries are queries that depend on the result of another query.

Use case: When you need to first fetch an ID, then use that ID to fetch detailed information.

Implementation:

javascript
const { data: user } = useQuery(['user', userId], fetchUser);

// Only execute the second query when user exists
const { data: userPosts } = useQuery(
  ['posts', user?.id],
  () => fetchPosts(user.id),
  { enabled: !!user }
);

2. Parallel Queries

Parallel queries are multiple independent queries executed simultaneously.

Use case: When you need to fetch multiple unrelated data in a single component.

Implementation:

javascript
// Method 1: Multiple useQuery hooks
const { data: users } = useQuery('users', fetchUsers);
const { data: posts } = useQuery('posts', fetchPosts);

// Method 2: Using useQueries hook (React Query v3+)
const results = useQueries([
  { queryKey: ['users'], queryFn: fetchUsers },
  { queryKey: ['posts'], queryFn: fetchPosts },
]);

3. Window Focus Refetching

React Query can automatically refetch data when the user refocuses the browser window.

Use case: Ensuring users see the latest data, especially in multi-tab applications.

Configuration:

javascript
// Global configuration
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: true, // Default value
    },
  },
});

// Per-query configuration
const { data } = useQuery('todos', fetchTodos, {
  refetchOnWindowFocus: false, // Disable
});

4. Pagination & Infinite Scroll

React Query provides dedicated hooks for handling pagination and infinite scroll.

Implementation:

javascript
// Infinite scroll query
const { data, fetchNextPage, hasNextPage } = useInfiniteQuery(
  ['posts', pageSize],
  ({ pageParam = 1 }) => fetchPosts(pageParam, pageSize),
  {
    getNextPageParam: (lastPage, pages) => {
      return lastPage.hasMore ? pages.length + 1 : undefined;
    },
  }
);

5. Polling

Automatically refetch data at regular intervals.

Use case: Applications that need to display real-time data, such as dashboards or chat apps.

Configuration:

javascript
const { data } = useQuery('todos', fetchTodos, {
  refetchInterval: 5000, // Refetch every 5 seconds
  refetchIntervalInBackground: true, // Poll in background
});

6. Prefetching

Fetch data in advance that might be needed, improving user experience.

Implementation:

javascript
// Manual prefetching
queryClient.prefetchQuery('todos', fetchTodos);

// Viewport prefetching (using react-query/prefetch)
usePrefetchQuery('todos', fetchTodos);

7. Persisted Queries

Persist cache data to localStorage or other storage.

Implementation: Using the persistQueryClient plugin

These advanced features enable React Query to handle various complex data fetching scenarios, providing more flexible and efficient data management solutions.