Installation react Quick Start react Comparison react TypeScript react React Native react Important Defaults react Query Keys react Query Functions react Query Options react Network Mode react Parallel Queries react Dependent Queries react Background Fetching Indicators react Window Focus Refetching react Disabling/Pausing Queries react Query Retries react Paginated Queries react Infinite Queries react Initial Query Data react Placeholder Query Data react Mutations react Query Invalidation react Invalidation from Mutations react Updates from Mutation Responses react Optimistic Updates react Query Cancellation react Scroll Restoration react Performance & Request Waterfalls react Prefetching & Router Integration react Server Rendering & Hydration react Advanced Server Rendering react Render Optimizations react Default Query Fn react Does this replace [Redux, MobX, etc]? react Migrating to v3 react Migrating to v4 react Migrating to v5 react React Reference react Functions / HydrationBoundary react Functions / QueryClientProvider react Functions / QueryErrorResetBoundary react Functions / defaultShouldDehydrateMutation react Functions / defaultShouldDehydrateQuery react Functions / dehydrate react Functions / dehydrateQuery react Functions / experimental_streamedQuery react Functions / hashKey react Functions / hydrate react Functions / infiniteQueryOptions react Functions / isCancelledError react Functions / keepPreviousData react Functions / matchMutation react Functions / matchQuery react Functions / mutationOptions react Functions / noop react Functions / partialMatchKey react Functions / queryOptions react Functions / replaceEqualDeep react Functions / shouldThrowError react Functions / useInfiniteQuery react Functions / useIsFetching react Functions / useIsMutating react Functions / useIsRestoring react Functions / useMutation react Functions / useMutationState react Functions / usePrefetchInfiniteQuery react Functions / usePrefetchQuery react Functions / useQueries react Functions / useQuery react Functions / useQueryClient react Functions / useQueryErrorResetBoundary react Functions / useSuspenseInfiniteQuery react Functions / useSuspenseQueries react Functions / useSuspenseQuery react Classes / CancelledError react Classes / InfiniteQueryObserver react Classes / Mutation react Classes / MutationCache react Classes / MutationObserver react Classes / QueriesObserver react Classes / Query react Classes / QueryCache react Classes / QueryClient react Classes / QueryObserver react Interfaces / CancelOptions react Interfaces / DefaultOptions react Interfaces / DehydrateOptions react Interfaces / DehydratedState react Interfaces / EnsureQueryDataOptions react Interfaces / FetchNextPageOptions react Interfaces / FetchPreviousPageOptions react Interfaces / FetchQueryOptions react Interfaces / FocusManager react Interfaces / HydrateOptions react Interfaces / HydrationBoundaryProps react Interfaces / InfiniteData react Interfaces / InfiniteQueryObserverBaseResult react Interfaces / InfiniteQueryObserverLoadingErrorResult react Interfaces / InfiniteQueryObserverLoadingResult react Interfaces / InfiniteQueryObserverOptions react Interfaces / InfiniteQueryObserverPendingResult react Interfaces / InfiniteQueryObserverPlaceholderResult react Interfaces / InfiniteQueryObserverRefetchErrorResult react Interfaces / InfiniteQueryObserverSuccessResult react Interfaces / InfiniteQueryPageParamsOptions react Interfaces / InitialPageParam react Interfaces / InvalidateOptions react Interfaces / InvalidateQueryFilters react Interfaces / MutateOptions react Interfaces / MutationCacheConfig react Interfaces / MutationFilters react Interfaces / MutationObserverBaseResult react Interfaces / MutationObserverErrorResult react Interfaces / MutationObserverIdleResult react Interfaces / MutationObserverLoadingResult react Interfaces / MutationObserverOptions react Interfaces / MutationObserverSuccessResult react Interfaces / MutationOptions react Interfaces / MutationState react Interfaces / NotifyEvent react Interfaces / OnlineManager react Interfaces / QueriesObserverOptions react Interfaces / QueryCacheConfig react Interfaces / QueryClientConfig react Interfaces / QueryErrorResetBoundaryProps react Interfaces / QueryExecuteOptions react Interfaces / QueryFilters react Interfaces / QueryObserverBaseResult react Interfaces / QueryObserverLoadingErrorResult react Interfaces / QueryObserverLoadingResult react Interfaces / QueryObserverOptions react Interfaces / QueryObserverPendingResult react Interfaces / QueryObserverPlaceholderResult react Interfaces / QueryObserverRefetchErrorResult react Interfaces / QueryObserverSuccessResult react Interfaces / QueryOptions react Interfaces / QueryState react Interfaces / RefetchOptions react Interfaces / RefetchQueryFilters react Interfaces / Register react Interfaces / ResetOptions react Interfaces / ResultOptions react Interfaces / SetDataOptions react Interfaces / TimeoutManager react Interfaces / UseBaseQueryOptions react Interfaces / UseInfiniteQueryOptions react Interfaces / UseMutationOptions react Interfaces / UseQueryOptions react Interfaces / UseSuspenseInfiniteQueryOptions react Interfaces / UseSuspenseQueryOptions react Types / AnyDataTag react Types / AnyUseBaseQueryOptions react Types / AnyUseInfiniteQueryOptions react Types / AnyUseMutationOptions react Types / AnyUseQueryOptions react Types / AnyUseSuspenseInfiniteQueryOptions react Types / AnyUseSuspenseQueryOptions react Types / DataTag react Types / DefaultError react Types / DefaultedInfiniteQueryObserverOptions react Types / DefaultedQueryObserverOptions react Types / DefinedInfiniteQueryObserverResult react Types / DefinedInitialDataInfiniteOptions react Types / DefinedInitialDataOptions react Types / DefinedQueryObserverResult react Types / DefinedUseInfiniteQueryResult react Types / DefinedUseQueryResult react Types / DistributiveOmit react Types / EnsureInfiniteQueryDataOptions react Types / FetchInfiniteQueryOptions react Types / FetchStatus react Types / GetNextPageParamFunction react Types / GetPreviousPageParamFunction react Types / InferDataFromTag react Types / InferErrorFromTag react Types / InfiniteQueryExecuteOptions react Types / InfiniteQueryObserverResult react Types / InitialDataFunction react Types / ManagedTimerId react Types / MutateFunction react Types / MutateFunctionRest react Types / MutationCacheNotifyEvent react Types / MutationFunction react Types / MutationFunctionContext react Types / MutationKey react Types / MutationMeta react Types / MutationObserverResult react Types / MutationScope react Types / MutationStatus react Types / NetworkMode react Types / NonUndefinedGuard react Types / NotifyEventType react Types / NotifyOnChangeProps react Types / OmitKeyof react Types / Override react Types / PlaceholderDataFunction react Types / QueriesOptions react Types / QueriesPlaceholderDataFunction react Types / QueriesResults react Types / QueryBooleanOption react Types / QueryCacheNotifyEvent react Types / QueryClientProviderProps react Types / QueryErrorClearResetFunction react Types / QueryErrorIsResetFunction react Types / QueryErrorResetBoundaryFunction react Types / QueryErrorResetFunction react Types / QueryFunction react Types / QueryFunctionContext react Types / QueryKey react Types / QueryKeyHashFunction react Types / QueryKeyWithDataTag react Types / QueryMeta react Types / QueryObserverResult react Types / QueryPersister react Types / QueryStatus react Types / SkipToken react Types / StaleTime react Types / StaleTimeFunction react Types / SuspenseQueriesOptions react Types / SuspenseQueriesResults react Types / ThrowOnError react Types / TimeoutCallback react Types / TimeoutProvider react Types / UndefinedInitialDataInfiniteOptions react Types / UndefinedInitialDataOptions react Types / UnsetMarker react Types / UnusedSkipTokenInfiniteOptions react Types / UnusedSkipTokenOptions react Types / Updater react Types / UseBaseMutationResult react Types / UseBaseQueryResult react Types / UseInfiniteQueryResult react Types / UseMutateAsyncFunction react Types / UseMutateFunction react Types / UseMutationResult react Types / UsePrefetchInfiniteQueryOptions react Types / UsePrefetchQueryOptions react Types / UseQueryResult react Types / UseSuspenseInfiniteQueryResult react Types / UseSuspenseQueryResult react Types / WithRequired react Types / dataTagErrorSymbol react Types / dataTagSymbol react Variables / IsRestoringProvider react Variables / QueryClientContext react Variables / dataTagErrorSymbol react Variables / dataTagSymbol react Variables / defaultScheduler react Variables / environmentManager react Variables / focusManager react Variables / isServer react Variables / notifyManager react Variables / onlineManager react Variables / skipToken react Variables / timeoutManager react Variables / unsetMarker react ESLint Plugin Query core Exhaustive Deps core Stable Query Client core No Rest Destructuring core No Unstable Deps core Infinite Query Property Order core No void Query Functions core Mutation Property Order core Prefer Query Options core Basic w/ GraphQL-Request react Auto Refetching / Polling / Realtime react Optimistic Updates react Pagination react Load-More & Infinite Scroll react Infinite query with Max pages react Default Query Function react Playground react Prefetching react Star Wars react Rick And Morty react Next.js Pages react Next.js app with prefetching react Next.js app with streaming react React Native react React Router react Offline Queries and Mutations react Shadow DOM react Devtools Embedded Panel react Chat example (streaming) react persistQueryClient react createSyncStoragePersister react createAsyncStoragePersister react broadcastQueryClient (Experimental) react createPersister (Experimental) react Installation react Quick Start react Comparison react TypeScript react React Native react Important Defaults react Query Keys react Query Functions react Query Options react Network Mode react Parallel Queries react Dependent Queries react

Background Fetching Indicators react Window Focus Refetching react Disabling/Pausing Queries react Query Retries react Paginated Queries react Infinite Queries react Initial Query Data react Placeholder Query Data react Mutations react Query Invalidation react Invalidation from Mutations react Updates from Mutation Responses react Optimistic Updates react Query Cancellation react Scroll Restoration react Performance & Request Waterfalls react Prefetching & Router Integration react Server Rendering & Hydration react Advanced Server Rendering react Render Optimizations react Default Query Fn react Does this replace [Redux, MobX, etc]? react Migrating to v3 react Migrating to v4 react Migrating to v5 react React Reference react Functions / HydrationBoundary react Functions / QueryClientProvider react Functions / QueryErrorResetBoundary react Functions / defaultShouldDehydrateMutation react Functions / defaultShouldDehydrateQuery react Functions / dehydrate react Functions / dehydrateQuery react Functions / experimental_streamedQuery react Functions / hashKey react Functions / hydrate react Functions / infiniteQueryOptions react Functions / isCancelledError react Functions / keepPreviousData react Functions / matchMutation react Functions / matchQuery react Functions / mutationOptions react Functions / noop react Functions / partialMatchKey react Functions / queryOptions react Functions / replaceEqualDeep react Functions / shouldThrowError react Functions / useInfiniteQuery react Functions / useIsFetching react Functions / useIsMutating react Functions / useIsRestoring react Functions / useMutation react Functions / useMutationState react Functions / usePrefetchInfiniteQuery react Functions / usePrefetchQuery react Functions / useQueries react Functions / useQuery react Functions / useQueryClient react Functions / useQueryErrorResetBoundary react Functions / useSuspenseInfiniteQuery react Functions / useSuspenseQueries react Functions / useSuspenseQuery react Classes / CancelledError react Classes / InfiniteQueryObserver react Classes / Mutation react Classes / MutationCache react Classes / MutationObserver react Classes / QueriesObserver react Classes / Query react Classes / QueryCache react Classes / QueryClient react Classes / QueryObserver react Interfaces / CancelOptions react Interfaces / DefaultOptions react Interfaces / DehydrateOptions react Interfaces / DehydratedState react Interfaces / EnsureQueryDataOptions react Interfaces / FetchNextPageOptions react Interfaces / FetchPreviousPageOptions react Interfaces / FetchQueryOptions react Interfaces / FocusManager react Interfaces / HydrateOptions react Interfaces / HydrationBoundaryProps react Interfaces / InfiniteData react Interfaces / InfiniteQueryObserverBaseResult react Interfaces / InfiniteQueryObserverLoadingErrorResult react Interfaces / InfiniteQueryObserverLoadingResult react Interfaces / InfiniteQueryObserverOptions react Interfaces / InfiniteQueryObserverPendingResult react Interfaces / InfiniteQueryObserverPlaceholderResult react Interfaces / InfiniteQueryObserverRefetchErrorResult react Interfaces / InfiniteQueryObserverSuccessResult react Interfaces / InfiniteQueryPageParamsOptions react Interfaces / InitialPageParam react Interfaces / InvalidateOptions react Interfaces / InvalidateQueryFilters react Interfaces / MutateOptions react Interfaces / MutationCacheConfig react Interfaces / MutationFilters react Interfaces / MutationObserverBaseResult react Interfaces / MutationObserverErrorResult react Interfaces / MutationObserverIdleResult react Interfaces / MutationObserverLoadingResult react Interfaces / MutationObserverOptions react Interfaces / MutationObserverSuccessResult react Interfaces / MutationOptions react Interfaces / MutationState react Interfaces / NotifyEvent react Interfaces / OnlineManager react Interfaces / QueriesObserverOptions react Interfaces / QueryCacheConfig react Interfaces / QueryClientConfig react Interfaces / QueryErrorResetBoundaryProps react Interfaces / QueryExecuteOptions react Interfaces / QueryFilters react Interfaces / QueryObserverBaseResult react Interfaces / QueryObserverLoadingErrorResult react Interfaces / QueryObserverLoadingResult react Interfaces / QueryObserverOptions react Interfaces / QueryObserverPendingResult react Interfaces / QueryObserverPlaceholderResult react Interfaces / QueryObserverRefetchErrorResult react Interfaces / QueryObserverSuccessResult react Interfaces / QueryOptions react Interfaces / QueryState react Interfaces / RefetchOptions react Interfaces / RefetchQueryFilters react Interfaces / Register react Interfaces / ResetOptions react Interfaces / ResultOptions react Interfaces / SetDataOptions react Interfaces / TimeoutManager react Interfaces / UseBaseQueryOptions react Interfaces / UseInfiniteQueryOptions react Interfaces / UseMutationOptions react Interfaces / UseQueryOptions react Interfaces / UseSuspenseInfiniteQueryOptions react Interfaces / UseSuspenseQueryOptions react Types / AnyDataTag react Types / AnyUseBaseQueryOptions react Types / AnyUseInfiniteQueryOptions react Types / AnyUseMutationOptions react Types / AnyUseQueryOptions react Types / AnyUseSuspenseInfiniteQueryOptions react Types / AnyUseSuspenseQueryOptions react Types / DataTag react Types / DefaultError react Types / DefaultedInfiniteQueryObserverOptions react Types / DefaultedQueryObserverOptions react Types / DefinedInfiniteQueryObserverResult react Types / DefinedInitialDataInfiniteOptions react Types / DefinedInitialDataOptions react Types / DefinedQueryObserverResult react Types / DefinedUseInfiniteQueryResult react Types / DefinedUseQueryResult react Types / DistributiveOmit react Types / EnsureInfiniteQueryDataOptions react Types / FetchInfiniteQueryOptions react Types / FetchStatus react Types / GetNextPageParamFunction react Types / GetPreviousPageParamFunction react Types / InferDataFromTag react Types / InferErrorFromTag react Types / InfiniteQueryExecuteOptions react Types / InfiniteQueryObserverResult react Types / InitialDataFunction react Types / ManagedTimerId react Types / MutateFunction react Types / MutateFunctionRest react Types / MutationCacheNotifyEvent react Types / MutationFunction react Types / MutationFunctionContext react Types / MutationKey react Types / MutationMeta react Types / MutationObserverResult react Types / MutationScope react Types / MutationStatus react Types / NetworkMode react Types / NonUndefinedGuard react Types / NotifyEventType react Types / NotifyOnChangeProps react Types / OmitKeyof react Types / Override react Types / PlaceholderDataFunction react Types / QueriesOptions react Types / QueriesPlaceholderDataFunction react Types / QueriesResults react Types / QueryBooleanOption react Types / QueryCacheNotifyEvent react Types / QueryClientProviderProps react Types / QueryErrorClearResetFunction react Types / QueryErrorIsResetFunction react Types / QueryErrorResetBoundaryFunction react Types / QueryErrorResetFunction react Types / QueryFunction react Types / QueryFunctionContext react Types / QueryKey react Types / QueryKeyHashFunction react Types / QueryKeyWithDataTag react Types / QueryMeta react Types / QueryObserverResult react Types / QueryPersister react Types / QueryStatus react Types / SkipToken react Types / StaleTime react Types / StaleTimeFunction react Types / SuspenseQueriesOptions react Types / SuspenseQueriesResults react Types / ThrowOnError react Types / TimeoutCallback react Types / TimeoutProvider react Types / UndefinedInitialDataInfiniteOptions react Types / UndefinedInitialDataOptions react Types / UnsetMarker react Types / UnusedSkipTokenInfiniteOptions react Types / UnusedSkipTokenOptions react Types / Updater react Types / UseBaseMutationResult react Types / UseBaseQueryResult react Types / UseInfiniteQueryResult react Types / UseMutateAsyncFunction react Types / UseMutateFunction react Types / UseMutationResult react Types / UsePrefetchInfiniteQueryOptions react Types / UsePrefetchQueryOptions react Types / UseQueryResult react Types / UseSuspenseInfiniteQueryResult react Types / UseSuspenseQueryResult react Types / WithRequired react Types / dataTagErrorSymbol react Types / dataTagSymbol react Variables / IsRestoringProvider react Variables / QueryClientContext react Variables / dataTagErrorSymbol react Variables / dataTagSymbol react Variables / defaultScheduler react Variables / environmentManager react Variables / focusManager react Variables / isServer react Variables / notifyManager react Variables / onlineManager react Variables / skipToken react Variables / timeoutManager react Variables / unsetMarker react ESLint Plugin Query core Exhaustive Deps core Stable Query Client core No Rest Destructuring core No Unstable Deps core Infinite Query Property Order core No void Query Functions core Mutation Property Order core Prefer Query Options core Basic w/ GraphQL-Request react Auto Refetching / Polling / Realtime react Optimistic Updates react Pagination react Load-More & Infinite Scroll react Infinite query with Max pages react Default Query Function react Playground react Prefetching react Star Wars react Rick And Morty react Next.js Pages react Next.js app with prefetching react Next.js app with streaming react React Native react React Router react Offline Queries and Mutations react Shadow DOM react Devtools Embedded Panel react Chat example (streaming) react persistQueryClient react createSyncStoragePersister react createAsyncStoragePersister react broadcastQueryClient (Experimental) react createPersister (Experimental) react What is placeholder data? Placeholder Data as a Value Placeholder Data Memoization Placeholder Data as a Function Placeholder Data from Cache Further reading What is placeholder data? Placeholder data allows a query to behave as if it already has data, similar to the initialData option, but the data is not persisted to the cache . This comes in handy for situations where you have enough partial (or fake) data to render the query successfully while the actual data is fetched in the background. Example: An individual blog post query could pull "preview" data from a parent list of blog posts that only include title and a small snippet of the post body. You would not want to persist this partial data to the query result of the individual query, but it is useful for showing the content layout as quickly as possible while the actual query finishes to fetch the entire object. There are a few ways to supply placeholder data for a query to the cache before you need it: Declaratively: Provide placeholderData to a query to prepopulate its cache if empty Provide placeholderData to a query to prepopulate its cache if empty Imperatively: Prefetch or fetch the data using queryClient and the placeholderData option Prefetch or fetch the data using queryClient and the placeholderData option When we use placeholderData , our Query will not be in a pending state - it will start out as being in success state, because we have data to display - even if that data is just "placeholder" data. To distinguish it from "real" data, we will also have the isPlaceholderData flag set to true on the Query result. Placeholder Data as a Value Placeholder Data Memoization If the process for accessing a query's placeholder data is intensive or just not something you want to perform on every render, you can memoize the value: Placeholder Data as a Function placeholderData can also be a function, where you can get access to the data and Query meta information of a "previous" successful Query. This is useful for situations where you want to use the data from one query as the placeholder data for another query. When the QueryKey changes, e.g. from ['todos', 1] to ['todos', 2] , we can keep displaying "old" data instead of having to show a loading spinner while data is transitioning from one Query to the next. For more information, see Paginated Queries . Placeholder Data from Cache In some circumstances, you may be able to provide the placeholder data for a query from the cached result of another. A good example of this would be searching the cached data from a blog post list query for a preview version of the post, then using that as the placeholder data for your individual post query: Further reading For a comparison between Placeholder Data and Initial Data , see the article by TkDodo .