MENU
Refetching
After a query has been performed, you can update the associated cache entry by refetching the data from the server in several ways:
1) Polling the server repeatedly, eg.
useGetPostQuery(123,{pollingInterval:30000});
2) Invalidating the cache tag assigned to the query, as you have previously seen here.
Note that you can also manually invalidate tags outside your endpoint definitions. eg.
dispatch(api.util.invalidateTags(['Post']))
dispatch(api.util.invalidateTags([{ type: 'Post', id: 1 }]))
dispatch(
api.util.invalidateTags([
{ type: 'Post', id: 1 },
{ type: 'Post', id: 'LIST' },
])
)
3) Removing all cache entries:
dispatch(api.util.resetApiState())
4) Manually triggering the refetch with refetch() and initiate():
import { useDispatch } from 'react-redux'
import { useGetPostsQuery } from './api'
const Component = () => {
const dispatch = useDispatch()
const { data, refetch } = useGetPostsQuery({ count: 5 })
function handleRefetchOne() {
// force re-fetches the data
refetch()
}
function handleRefetchTwo() {
// has the same effect as `refetch` for the associated query
dispatch(
api.endpoints.getPosts.initiate(
{ count: 5 },
{ subscribe: false, forceRefetch: true }
)
)
}
return (
<div>
<button onClick={handleRefetchOne}>Force re-fetch 1</button>
<button onClick={handleRefetchTwo}>Force re-fetch 2</button>
</div>
)
}
5) Encouraging re-fetching with refetchOnMountOrArgChange. In addition to 'true', you can pass in a number to indicate the number of seconds that must have elapsed in order to refetch the query, when a new component mounts and subscribes to the query, or when the arguments change.
Imagine you go from usePage(1) to usePage(2) and then back to usePage(1) - all in the same component. At that point the cache entry for page 1 could still be in the cache - and with refetchOnMountOrArgChange() you can decide at which point the cache entry is considered "too old" and a refetch would be necessary.
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
export const api = createApi({
baseQuery: fetchBaseQuery({ baseUrl: '/' }),
// global configuration for the api
refetchOnMountOrArgChange: 30,
endpoints: (builder) => ({
getPosts: builder.query({
query: () => `posts`,
}),
}),
})import { useGetPostsQuery } from './api'
const Component = () => {
const { data } = useGetPostsQuery(
{ count: 5 },
// this overrules the api definition setting,
// forcing the query to always fetch when this component is mounted
{ refetchOnMountOrArgChange: true }
)
return ...
}
6) Re-fetching on window focus with refetchOnFocus. Note that this requires setupListeners() to have been called.
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
export const api = createApi({
baseQuery: fetchBaseQuery({ baseUrl: '/' }),
// global configuration for the api
refetchOnFocus: true,
endpoints: (builder) => ({
getPosts: builder.query({
query: () => `posts`,
}),
}),
})import { useGetPostsQuery } from './api'
const Component = () => {
const { data } = useGetPostsQuery(
{ count: 5 },
// this overrules the api definition setting,
{ refetchOnFocus: true }
}
return <div>...</div>
}
7) Re-fetching on network reconnection with refetchOnReconnect. Note that this requires setupListeners() to have been called..
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
export const api = createApi({
baseQuery: fetchBaseQuery({ baseUrl: '/' }),
// global configuration for the api
refetchOnReconnect: true,
endpoints: (builder) => ({
getPosts: builder.query({
query: () => `posts`,
}),
}),
})import { useGetPostsQuery } from './api'
const Component = () => {
const { data } = useGetPostsQuery(
{ count: 5 },
// this overrules the api definition setting,
{ refetchOnReconnect: true }
}
return <div>...</div>
}