Next.js Client-Side Data Fetching (SWR u0026 React Query) Quiz Quiz

Explore essential Next.js client-side data fetching concepts using hooks for SWR and React Query. This quiz assesses your understanding of fetching, caching strategies, and best practices for seamless and efficient user experiences in modern web applications.

1. Basics of SWR Hook Usage

   Which option correctly demonstrates how to fetch user profile data from '/api/user' using a data fetching hook in a Next.js component?

   1. const value = useAsync('/api/user');
   2. const { data, error } = useSWR('/api/user', fetcher);
   3. const result = useFetch('/api/user', fetcher);
   4. const [data, error] = useSWR('/api/user');

   Explanation: The correct approach is 'const { data, error } = useSWR('/api/user', fetcher);' because it uses SWR's hook syntax and supports the fetcher function required for data retrieval. The option 'const [data, error] = useSWR('/api/user');' is incorrect because SWR returns an object, not an array. 'const result = useFetch' and 'const value = useAsync' are not valid APIs for SWR or React Query. Only the first option correctly fetches and destructures the needed values.

2. Cache Invalidating in React Query

   In a scenario where a user updates their profile, which method is recommended to ensure the cached profile data is updated in React Query?

   1. Reset the hook state using useState(null).
   2. Call refetch() inside the mutation function.
   3. Manually remove data from local storage.
   4. Use the queryClient.invalidateQueries(['profile']) method after mutation success.

   Explanation: Calling queryClient.invalidateQueries(['profile']) after a successful mutation tells React Query to refetch the outdated cache, ensuring fresh data is loaded. Simply calling refetch() inside the mutation does not guarantee synchronization between different components using the cache. Resetting the hook with useState(null) does not affect the cache maintained by React Query. Removing data from local storage is irrelevant, as React Query does not use local storage for cache management.

3. SWR Revalidation Triggers

   Which event will automatically trigger SWR to refetch and revalidate data by default?

   1. Whenever any button is clicked on the page.
   2. When server-side rendering is re-executed.
   3. When the user refocuses the browser window or tab.
   4. Only when the component mounts for the first time.

   Explanation: SWR will automatically revalidate and refetch data when the user refocuses the browser window or tab as part of its default behavior to keep data fresh. It is not limited to just the first component mount, making option two inaccurate. Clicking any button does not trigger revalidation unless specifically programmed to do so. Server-side rendering events are separate from client-side revalidation in SWR.

4. React Query Query Keys and Caching

   Given two fetches using useQuery(['user', userId], fetchUser) with different userId values, how does React Query treat their cached results?

   1. It merges the users into one cache object.
   2. It ignores userId and always returns the same data.
   3. It overwrites the cache so only the latest userId data is stored.
   4. It stores separate cache entries for each unique userId.

   Explanation: React Query uses the query key array, so each unique userId in ['user', userId] creates a distinct cache entry. Overwriting or merging would lead to data being replaced or mixed, which does not occur. Ignoring the userId would make the cache ineffective for multiple users; instead, each user's data remains separate and accessible.

5. Suspense and Data Fetching Hooks

   What is the main benefit of enabling Suspense mode with SWR or React Query in Next.js components?

   1. It makes all fetches synchronous and blocking.
   2. It disables caching for better performance.
   3. It automatically handles loading states with less manual code.
   4. It fetches data only on server, not on the client.

   Explanation: With Suspense enabled, the loading states are handled declaratively, reducing the need for manual loading logic within components. Suspending does not restrict fetching to the server; data is still fetched on the client. Disabling caching or making all fetches synchronous is incorrect, as Suspense still supports caching and keeps fetches asynchronous. The key benefit is streamlined management of loading behavior for a smoother user experience.