React Example: Offline
jsx
import * as React from 'react'
import {
useQuery,
QueryClient,
MutationCache,
onlineManager,
useIsRestoring,
} from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import toast, { Toaster } from 'react-hot-toast'
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
import {
Link,
Outlet,
ReactLocation,
Router,
useMatch,
} from '@tanstack/react-location'
import * as api from './api'
import { movieKeys, useMovie } from './movies'
const persister = createSyncStoragePersister({
storage: window.localStorage,
})
const location = new ReactLocation()
const queryClient = new QueryClient({
defaultOptions: {
queries: {
cacheTime: 1000 * 60 * 60 * 24, // 24 hours
staleTime: 2000,
retry: 0,
},
},
// configure global cache callbacks to show toast notifications
mutationCache: new MutationCache({
onSuccess: (data) => {
toast.success(data.message)
},
onError: (error) => {
toast.error(error.message)
},
}),
})
// we need a default mutation function so that paused mutations can resume after a page reload
queryClient.setMutationDefaults(movieKeys.all(), {
mutationFn: async ({ id, comment }) => {
// to avoid clashes with our optimistic update when an offline mutation continues
await queryClient.cancelQueries({ queryKey: movieKeys.detail(id) })
return api.updateMovie(id, comment)
},
})
export default function App() {
return (
<PersistQueryClientProvider
client={queryClient}
persistOptions={{ persister }}
onSuccess={() => {
// resume mutations after initial restore from localStorage was successful
queryClient.resumePausedMutations().then(() => {
queryClient.invalidateQueries()
})
}}
>
<Movies />
<ReactQueryDevtools initialIsOpen />
</PersistQueryClientProvider>
)
}
function Movies() {
const isRestoring = useIsRestoring()
return (
<Router
location={location}
routes={[
{
path: '/',
element: <List />,
},
{
path: ':movieId',
element: <Detail />,
errorElement: <MovieError />,
loader: ({ params: { movieId } }) =>
queryClient.getQueryData(movieKeys.detail(movieId)) ??
// do not load if we are offline or hydrating because it returns a promise that is pending until we go online again
// we just let the Detail component handle it
(onlineManager.isOnline() && !isRestoring
? queryClient.fetchQuery({
queryKey: movieKeys.detail(movieId),
queryFn: () => api.fetchMovie(movieId),
})
: undefined),
},
]}
>
<Outlet />
<Toaster />
</Router>
)
}
function List() {
const moviesQuery = useQuery({
queryKey: movieKeys.list(),
queryFn: api.fetchMovies,
})
if (moviesQuery.isLoading && moviesQuery.isFetching) {
return 'Loading...'
}
if (moviesQuery.data) {
return (
<div>
<h1>Movies</h1>
<p>
Try to mock offline behaviour with the button in the devtools. You can
navigate around as long as there is already data in the cache. You'll
get a refetch as soon as you go online again.
</p>
<ul>
{moviesQuery.data.movies.map((movie) => (
<li key={movie.id}>
<Link to={`./${movie.id}`} preload>
{movie.title}
</Link>
</li>
))}
</ul>
<div>
Updated at: {new Date(moviesQuery.data.ts).toLocaleTimeString()}
</div>
<div>{moviesQuery.isFetching && 'fetching...'}</div>
</div>
)
}
// query will be in 'idle' fetchStatus while restoring from localStorage
return null
}
function MovieError() {
const { error } = useMatch()
return (
<div>
<Link to="..">Back</Link>
<h1>Couldn't load movie!</h1>
<div>{error.message}</div>
</div>
)
}
function Detail() {
const {
params: { movieId },
} = useMatch()
const { comment, setComment, updateMovie, movieQuery } = useMovie(movieId)
if (movieQuery.isLoading && movieQuery.isFetching) {
return 'Loading...'
}
function submitForm(event) {
event.preventDefault()
updateMovie.mutate({
id: movieId,
comment,
})
}
if (movieQuery.data) {
return (
<form onSubmit={submitForm}>
<Link to="..">Back</Link>
<h1>Movie: {movieQuery.data.movie.title}</h1>
<p>
Try to mock offline behaviour with the button in the devtools, then
update the comment. The optimistic update will succeed, but the actual
mutation will be paused and resumed once you go online again.
</p>
<p>
You can also reload the page, which will make the persisted mutation
resume, as you will be online again when you "come back".
</p>
<p>
<label>
Comment: <br />
<textarea
name="comment"
value={comment}
onChange={(event) => setComment(event.target.value)}
/>
</label>
</p>
<button type="submit">Submit</button>
<div>
Updated at: {new Date(movieQuery.data.ts).toLocaleTimeString()}
</div>
<div>{movieQuery.isFetching && 'fetching...'}</div>
<div>
{updateMovie.isPaused
? 'mutation paused - offline'
: updateMovie.isLoading && 'updating...'}
</div>
</form>
)
}
if (movieQuery.isPaused) {
return "We're offline and have no data to show :("
}
return null
}
import * as React from 'react'
import {
useQuery,
QueryClient,
MutationCache,
onlineManager,
useIsRestoring,
} from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import toast, { Toaster } from 'react-hot-toast'
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
import {
Link,
Outlet,
ReactLocation,
Router,
useMatch,
} from '@tanstack/react-location'
import * as api from './api'
import { movieKeys, useMovie } from './movies'
const persister = createSyncStoragePersister({
storage: window.localStorage,
})
const location = new ReactLocation()
const queryClient = new QueryClient({
defaultOptions: {
queries: {
cacheTime: 1000 * 60 * 60 * 24, // 24 hours
staleTime: 2000,
retry: 0,
},
},
// configure global cache callbacks to show toast notifications
mutationCache: new MutationCache({
onSuccess: (data) => {
toast.success(data.message)
},
onError: (error) => {
toast.error(error.message)
},
}),
})
// we need a default mutation function so that paused mutations can resume after a page reload
queryClient.setMutationDefaults(movieKeys.all(), {
mutationFn: async ({ id, comment }) => {
// to avoid clashes with our optimistic update when an offline mutation continues
await queryClient.cancelQueries({ queryKey: movieKeys.detail(id) })
return api.updateMovie(id, comment)
},
})
export default function App() {
return (
<PersistQueryClientProvider
client={queryClient}
persistOptions={{ persister }}
onSuccess={() => {
// resume mutations after initial restore from localStorage was successful
queryClient.resumePausedMutations().then(() => {
queryClient.invalidateQueries()
})
}}
>
<Movies />
<ReactQueryDevtools initialIsOpen />
</PersistQueryClientProvider>
)
}
function Movies() {
const isRestoring = useIsRestoring()
return (
<Router
location={location}
routes={[
{
path: '/',
element: <List />,
},
{
path: ':movieId',
element: <Detail />,
errorElement: <MovieError />,
loader: ({ params: { movieId } }) =>
queryClient.getQueryData(movieKeys.detail(movieId)) ??
// do not load if we are offline or hydrating because it returns a promise that is pending until we go online again
// we just let the Detail component handle it
(onlineManager.isOnline() && !isRestoring
? queryClient.fetchQuery({
queryKey: movieKeys.detail(movieId),
queryFn: () => api.fetchMovie(movieId),
})
: undefined),
},
]}
>
<Outlet />
<Toaster />
</Router>
)
}
function List() {
const moviesQuery = useQuery({
queryKey: movieKeys.list(),
queryFn: api.fetchMovies,
})
if (moviesQuery.isLoading && moviesQuery.isFetching) {
return 'Loading...'
}
if (moviesQuery.data) {
return (
<div>
<h1>Movies</h1>
<p>
Try to mock offline behaviour with the button in the devtools. You can
navigate around as long as there is already data in the cache. You'll
get a refetch as soon as you go online again.
</p>
<ul>
{moviesQuery.data.movies.map((movie) => (
<li key={movie.id}>
<Link to={`./${movie.id}`} preload>
{movie.title}
</Link>
</li>
))}
</ul>
<div>
Updated at: {new Date(moviesQuery.data.ts).toLocaleTimeString()}
</div>
<div>{moviesQuery.isFetching && 'fetching...'}</div>
</div>
)
}
// query will be in 'idle' fetchStatus while restoring from localStorage
return null
}
function MovieError() {
const { error } = useMatch()
return (
<div>
<Link to="..">Back</Link>
<h1>Couldn't load movie!</h1>
<div>{error.message}</div>
</div>
)
}
function Detail() {
const {
params: { movieId },
} = useMatch()
const { comment, setComment, updateMovie, movieQuery } = useMovie(movieId)
if (movieQuery.isLoading && movieQuery.isFetching) {
return 'Loading...'
}
function submitForm(event) {
event.preventDefault()
updateMovie.mutate({
id: movieId,
comment,
})
}
if (movieQuery.data) {
return (
<form onSubmit={submitForm}>
<Link to="..">Back</Link>
<h1>Movie: {movieQuery.data.movie.title}</h1>
<p>
Try to mock offline behaviour with the button in the devtools, then
update the comment. The optimistic update will succeed, but the actual
mutation will be paused and resumed once you go online again.
</p>
<p>
You can also reload the page, which will make the persisted mutation
resume, as you will be online again when you "come back".
</p>
<p>
<label>
Comment: <br />
<textarea
name="comment"
value={comment}
onChange={(event) => setComment(event.target.value)}
/>
</label>
</p>
<button type="submit">Submit</button>
<div>
Updated at: {new Date(movieQuery.data.ts).toLocaleTimeString()}
</div>
<div>{movieQuery.isFetching && 'fetching...'}</div>
<div>
{updateMovie.isPaused
? 'mutation paused - offline'
: updateMovie.isLoading && 'updating...'}
</div>
</form>
)
}
if (movieQuery.isPaused) {
return "We're offline and have no data to show :("
}
return null
}
