3 Amazing New TanStack Query Features!

Key Concepts

• Infinite Queries: Loading data in batches as the user scrolls.
• Intersection Observer: Detecting when an element is visible on the screen.
• Streamed Queries: Receiving data in a stream, allowing for incremental updates.
• Broadcast Query: Sharing the Tanstack Query cache between different browser windows.
• React Query Key Manager: A library for managing query keys in a type-safe manner.

Infinite Queries

• Definition: Infinite queries are designed to continuously load more data as the user interacts with the page, typically by scrolling.
• Implementation: The example uses a "puppies demo" where batches of 10 dogs are loaded.
• useInfiniteQuery Hook: This hook is similar to useQuery but specifically designed for infinite queries. It requires:
  • queryKey: A unique key for the query.
  • queryFn: A function that fetches the data. In this case, it calls a server function.
  • initialPageParam: The initial page number or cursor.
  • getNextPageParam: A function that determines the parameter for the next page based on the current data.
• Intersection Observer: Used to detect when a "load more" div is visible, triggering the fetching of the next page.
  • The useIntersectionObserver hook returns a boolean (isIntersecting) and a ref to attach to the div.
  • A useEffect hook monitors isIntersecting and calls fetchNextPage when it becomes true.
• Example: The demo uses placeDog.net to generate dog images. The server function returns a JSON blob with the next cursor and the dogs for the current page.
• Code Structure:
  • A constant defines the number of dogs per page (10).
  • A server function fetches the dogs for a given page.
  • The route component uses useInfiniteQuery to manage the data fetching.
  • A div with a ref is placed at the end of the page.
  • The useIntersectionObserver hook and useEffect hook trigger the loading of more data when the div is visible.

Streamed Queries

• Definition: Streamed queries allow data to be received in a stream, enabling incremental updates to the UI as data becomes available. This is particularly useful for AI applications where tokens are streamed.
• Experimental Status: This feature is currently experimental.
• Implementation: The demo shows streamed queries from both an API endpoint and a server function.
• API Endpoint Example:
  • The /api/stream-query endpoint returns a ReadableStream.
  • The stream sends status updates every second, simulating a long-running process.
  • The start method of the stream is used to send data.
  • controller.close() is called when the stream is complete.
• Server Function Example:
  • A server function getStreamData uses response.raw to return a ReadableStream.
  • The stream sends the same status updates as the API endpoint example.
• streamedQuery Function:
  • Takes a query function that receives a generator.
  • The query function fetches data from the API endpoint or server function.
  • A reader is used to read the stream of data.
  • The data is decoded from a Uint8Array to text.
  • The text is yielded, adding it to an array of data.
• Code Structure:
  • The API endpoint or server function returns a ReadableStream.
  • The streamedQuery function fetches the stream and yields data fragments.
  • The component iterates through the array of data fragments and displays them.

Broadcast Query

• Definition: Broadcast query allows the Tanstack Query cache to be shared between different browser windows of the same application.
• Experimental Status: This feature is also experimental.
• Use Case: When a user has multiple windows open for the same application, data fetched in one window can be instantly available in the other windows without refetching.
• Implementation:
  • The BroadcastQueryClient is used to connect to the query client and subscribe to changes.
  • Changes to the query client are broadcasted to all other tabs subscribed to the same channel.
• Code Structure:
  • The BroadcastQueryClient is initialized in the root provider.
  • useQuery is used to manage shared state.
  • useQueryClient is used to directly set query data.
  • The query key is used as a state key.
• Example: A text input in one window updates the text in another window in real-time. This demonstrates how Tanstack Query can be used as a shared state manager.
• Key Point: The example uses useQuery in a way that might be unexpected, primarily for state management rather than data fetching.

React Query Key Manager

• Definition: A library for managing query keys in a type-safe manner.
• Purpose: Helps ensure that query keys are consistent across different parts of the application.
• Functionality:
  • Creates a type-safe named query system.
  • Provides methods for generating query keys.
  • Helps prevent errors caused by using different keys for the same data.
• Example: userKeys.profile(userId) generates a type-safe key for a user profile.

Conclusion

The video highlights three new and exciting features in Tanstack Query: infinite queries, streamed queries, and broadcast query. Infinite queries provide a seamless way to load data as the user scrolls, while streamed queries enable real-time updates for applications that receive data in streams. Broadcast query allows for sharing the query cache between different browser windows, improving performance and user experience. Additionally, the React Query Key Manager is introduced as a tool for managing query keys in a type-safe manner. These features expand the capabilities of Tanstack Query and make it an even more powerful tool for managing data in React applications.