>
}) {
- const { status, data, error, isFetching } = usePost(postId);
+ const { status, data, error, isFetching } = usePost(postId)
return (
@@ -116,8 +116,8 @@ function Post({
Back
- {!postId || status === "pending" ? (
- "Loading..."
+ {!postId || status === 'pending' ? (
+ 'Loading...'
) : error instanceof Error ? (
Error: {error.message}
) : (
@@ -126,15 +126,15 @@ function Post({
- {isFetching ? "Background Updating..." : " "}
+ {isFetching ? 'Background Updating...' : ' '}
)}
- );
+ )
}
function App() {
- const [postId, setPostId] = React.useState(-1);
+ const [postId, setPostId] = React.useState(-1)
return (
(You may need to throttle your network speed to simulate longer
loading sequences)
@@ -158,8 +158,8 @@ function App() {
)}
- );
+ )
}
-const rootElement = document.getElementById("root") as HTMLElement;
-ReactDOM.createRoot(rootElement).render(
@@ -21,7 +21,7 @@ function App() {
As you visit the posts below, you will notice them in a loading state
the first time you load them. However, after you return to this list and
click on any posts you have already visited again, you will see them
- load instantly and background refresh right before your eyes!{" "}
+ load instantly and background refresh right before your eyes!{' '}
(You may need to throttle your network speed to simulate longer
loading sequences)
@@ -34,32 +34,32 @@ function App() {
)}
- );
+ )
}
function usePosts() {
return useQuery({
- queryKey: ["posts"],
+ queryKey: ['posts'],
queryFn: async () => {
const { data } = await axios.get(
- "https://jsonplaceholder.typicode.com/posts"
- );
- return data;
+ 'https://jsonplaceholder.typicode.com/posts',
+ )
+ return data
},
- });
+ })
}
function Posts({ setPostId }) {
- const queryClient = useQueryClient();
- const { status, data, error, isFetching } = usePosts();
+ const queryClient = useQueryClient()
+ const { status, data, error, isFetching } = usePosts()
return (
Posts
- {status === "pending" ? (
- "Loading..."
- ) : status === "error" ? (
+ {status === 'pending' ? (
+ 'Loading...'
+ ) : status === 'error' ? (
Error: {error.message}
) : (
<>
@@ -72,10 +72,10 @@ function Posts({ setPostId }) {
style={
// We can access the query data here to show bold links for
// ones that are cached
- queryClient.getQueryData(["post", post.id])
+ queryClient.getQueryData(['post', post.id])
? {
- fontWeight: "bold",
- color: "green",
+ fontWeight: 'bold',
+ color: 'green',
}
: {}
}
@@ -85,31 +85,31 @@ function Posts({ setPostId }) {
))}
-
{isFetching ? "Background Updating..." : " "}
+
{isFetching ? 'Background Updating...' : ' '}
)}
- );
+ )
}
const getPostById = async (id) => {
const { data } = await axios.get(
- `https://jsonplaceholder.typicode.com/posts/${id}`
- );
- return data;
-};
+ `https://jsonplaceholder.typicode.com/posts/${id}`,
+ )
+ return data
+}
function usePost(postId) {
return useQuery({
- queryKey: ["post", postId],
+ queryKey: ['post', postId],
queryFn: () => getPostById(postId),
enabled: !!postId,
- });
+ })
}
function Post({ postId, setPostId }) {
- const { status, data, error, isFetching } = usePost(postId);
+ const { status, data, error, isFetching } = usePost(postId)
return (
@@ -118,9 +118,9 @@ function Post({ postId, setPostId }) {
Back
- {!postId || status === "pending" ? (
- "Loading..."
- ) : status === "error" ? (
+ {!postId || status === 'pending' ? (
+ 'Loading...'
+ ) : status === 'error' ? (
Error: {error.message}
) : (
<>
@@ -128,12 +128,12 @@ function Post({ postId, setPostId }) {
- {isFetching ? "Background Updating..." : " "}
+ {isFetching ? 'Background Updating...' : ' '}
)}
- );
+ )
}
-const rootElement = document.getElementById("root");
-ReactDOM.createRoot(rootElement).render(
@@ -36,7 +36,7 @@ function App() {
As you visit the posts below, you will notice them in a loading state
the first time you load them. However, after you return to this list and
click on any posts you have already visited again, you will see them
- load instantly and background refresh right before your eyes!{" "}
+ load instantly and background refresh right before your eyes!{' '}
(You may need to throttle your network speed to simulate longer
loading sequences)
@@ -49,24 +49,24 @@ function App() {
)}
- );
+ )
}
function Posts({ setPostId }) {
- const queryClient = useQueryClient();
+ const queryClient = useQueryClient()
// All you have to do now is pass a key!
const { status, data, error, isFetching } = useQuery({
- queryKey: ["/posts"],
- });
+ queryKey: ['/posts'],
+ })
return (
Posts
- {status === "pending" ? (
- "Loading..."
- ) : status === "error" ? (
+ {status === 'pending' ? (
+ 'Loading...'
+ ) : status === 'error' ? (
Error: {error.message}
) : (
<>
@@ -79,10 +79,10 @@ function Posts({ setPostId }) {
style={
// We can use the queryCache here to show bold links for
// ones that are cached
- queryClient.getQueryData(["post", post.id])
+ queryClient.getQueryData(['post', post.id])
? {
- fontWeight: "bold",
- color: "green",
+ fontWeight: 'bold',
+ color: 'green',
}
: {}
}
@@ -92,12 +92,12 @@ function Posts({ setPostId }) {
))}
-
{isFetching ? "Background Updating..." : " "}
+
{isFetching ? 'Background Updating...' : ' '}
)}
- );
+ )
}
function Post({ postId, setPostId }) {
@@ -105,7 +105,7 @@ function Post({ postId, setPostId }) {
const { status, data, error, isFetching } = useQuery({
queryKey: [`/posts/${postId}`],
enabled: !!postId,
- });
+ })
return (
@@ -114,9 +114,9 @@ function Post({ postId, setPostId }) {
Back
- {!postId || status === "pending" ? (
- "Loading..."
- ) : status === "error" ? (
+ {!postId || status === 'pending' ? (
+ 'Loading...'
+ ) : status === 'error' ? (
Error: {error.message}
) : (
<>
@@ -124,12 +124,12 @@ function Post({ postId, setPostId }) {
- {isFetching ? "Background Updating..." : " "}
+ {isFetching ? 'Background Updating...' : ' '}
)}
- );
+ )
}
-const rootElement = document.getElementById("root");
-ReactDOM.createRoot(rootElement).render(
Updated at: {new Date(moviesQuery.data.ts).toLocaleTimeString()}
- {moviesQuery.isFetching && "fetching..."}
+ {moviesQuery.isFetching && 'fetching...'}
- );
+ )
}
// query will be in 'idle' fetchStatus while restoring from localStorage
- return null;
+ return null
}
function MovieError() {
- const { error } = useMatch();
+ const { error } = useMatch()
return (
@@ -157,26 +157,26 @@ function MovieError() {
Couldn't load movie!
{error.message}
Updated at: {new Date(movieQuery.data.ts).toLocaleTimeString()}
- {movieQuery.isFetching && "fetching..."}
+ {movieQuery.isFetching && 'fetching...'}
{updateMovie.isPaused
- ? "mutation paused - offline"
- : updateMovie.isPending && "updating..."}
+ ? 'mutation paused - offline'
+ : updateMovie.isPending && 'updating...'}
- );
+ )
}
if (movieQuery.isPaused) {
- return "We're offline and have no data to show :(";
+ return "We're offline and have no data to show :("
}
- return null;
+ return null
}
diff --git a/examples/react/offline/src/api.js b/examples/react/offline/src/api.js
index 1bb7d0a9e0..582d56dbf3 100644
--- a/examples/react/offline/src/api.js
+++ b/examples/react/offline/src/api.js
@@ -1,41 +1,41 @@
-import { setupWorker, rest } from "msw";
-import ky from "ky";
+import { setupWorker, rest } from 'msw'
+import ky from 'ky'
const movies = [
{
- id: "1",
- title: "Guardians of the Galaxy",
- comment: "",
+ id: '1',
+ title: 'Guardians of the Galaxy',
+ comment: '',
},
{
- id: "2",
- title: "Wall-E",
- comment: "",
+ id: '2',
+ title: 'Wall-E',
+ comment: '',
},
-];
+]
-export const fetchMovie = (id) => ky.get(`/movies/${id}`).json();
-export const fetchMovies = () => ky.get("/movies").json();
+export const fetchMovie = (id) => ky.get(`/movies/${id}`).json()
+export const fetchMovies = () => ky.get('/movies').json()
export const updateMovie = (id, comment) =>
- ky.post(`/movies/${id}`, { json: { comment } }).json();
+ ky.post(`/movies/${id}`, { json: { comment } }).json()
export const worker = setupWorker(
...[
- rest.get("/movies", (req, res, ctx) => {
+ rest.get('/movies', (req, res, ctx) => {
return res(
ctx.delay(1000),
ctx.json({
ts: Date.now(),
movies: movies.map(({ id, title }) => ({ id, title })),
- })
- );
+ }),
+ )
}),
- rest.get("/movies/:id", (req, res, ctx) => {
- const { id } = req.params;
+ rest.get('/movies/:id', (req, res, ctx) => {
+ const { id } = req.params
- const movie = movies.find((movie) => movie.id === id);
+ const movie = movies.find((movie) => movie.id === id)
if (!movie) {
- return res(ctx.status(404, `Movie with id ${id} not found`));
+ return res(ctx.status(404, `Movie with id ${id} not found`))
}
return res(
@@ -43,25 +43,25 @@ export const worker = setupWorker(
ctx.json({
ts: Date.now(),
movie,
- })
- );
+ }),
+ )
}),
- rest.post("/movies/:id", (req, res, ctx) => {
- const { id } = req.params;
- const { comment } = req.body;
+ rest.post('/movies/:id', (req, res, ctx) => {
+ const { id } = req.params
+ const { comment } = req.body
movies.forEach((movie) => {
if (movie.id === id) {
- movie.comment = comment.toUpperCase();
+ movie.comment = comment.toUpperCase()
}
- });
+ })
return res(
ctx.delay(1000),
ctx.json({
message: `Successfully updated movie ${id}`,
- })
- );
+ }),
+ )
}),
- ]
-);
+ ],
+)
diff --git a/examples/react/offline/src/index.jsx b/examples/react/offline/src/index.jsx
index 98b53092e8..026a35b323 100644
--- a/examples/react/offline/src/index.jsx
+++ b/examples/react/offline/src/index.jsx
@@ -1,13 +1,13 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
-import { worker } from "./api";
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import { worker } from './api'
-worker.start();
+worker.start()
-const rootElement = document.getElementById("root");
+const rootElement = document.getElementById('root')
ReactDOM.createRoot(rootElement).render(
- ,
+)
diff --git a/examples/react/offline/src/movies.js b/examples/react/offline/src/movies.js
index 67999c5ec9..12fb656539 100644
--- a/examples/react/offline/src/movies.js
+++ b/examples/react/offline/src/movies.js
@@ -1,32 +1,32 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import * as api from "./api";
-import * as React from "react";
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import * as api from './api'
+import * as React from 'react'
export const movieKeys = {
- all: () => ["movies"],
- list: () => [...movieKeys.all(), "list"],
- details: () => [...movieKeys.all(), "detail"],
+ all: () => ['movies'],
+ list: () => [...movieKeys.all(), 'list'],
+ details: () => [...movieKeys.all(), 'detail'],
detail: (id) => [...movieKeys.details(), id],
-};
+}
export const useMovie = (movieId) => {
- const queryClient = useQueryClient();
+ const queryClient = useQueryClient()
const movieQuery = useQuery({
queryKey: movieKeys.detail(movieId),
queryFn: () => api.fetchMovie(movieId),
- });
+ })
- const [comment, setComment] = React.useState();
+ const [comment, setComment] = React.useState()
const updateMovie = useMutation({
mutationKey: movieKeys.detail(movieId),
onMutate: async () => {
- await queryClient.cancelQueries({ queryKey: movieKeys.detail(movieId) });
- const previousData = queryClient.getQueryData(movieKeys.detail(movieId));
+ await queryClient.cancelQueries({ queryKey: movieKeys.detail(movieId) })
+ const previousData = queryClient.getQueryData(movieKeys.detail(movieId))
// remove local state so that server state is taken instead
- setComment(undefined);
+ setComment(undefined)
queryClient.setQueryData(movieKeys.detail(movieId), {
...previousData,
@@ -34,22 +34,22 @@ export const useMovie = (movieId) => {
...previousData.movie,
comment,
},
- });
+ })
- return { previousData };
+ return { previousData }
},
onError: (_, __, context) => {
- queryClient.setQueryData(movieKeys.detail(movieId), context.previousData);
+ queryClient.setQueryData(movieKeys.detail(movieId), context.previousData)
},
onSettled: () => {
- queryClient.invalidateQueries({ queryKey: movieKeys.detail(movieId) });
+ queryClient.invalidateQueries({ queryKey: movieKeys.detail(movieId) })
},
- });
+ })
return {
comment: comment ?? movieQuery.data?.movie.comment,
setComment,
updateMovie,
movieQuery,
- };
-};
+ }
+}
diff --git a/examples/react/optimistic-updates-typescript/pages/api/data.js b/examples/react/optimistic-updates-typescript/src/pages/api/data.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/react/optimistic-updates-typescript/pages/api/data.js
rename to examples/react/optimistic-updates-typescript/src/pages/api/data.js
diff --git a/examples/react/optimistic-updates-typescript/pages/index.tsx b/examples/react/optimistic-updates-typescript/src/pages/index.tsx
old mode 100755
new mode 100644
similarity index 100%
rename from examples/react/optimistic-updates-typescript/pages/index.tsx
rename to examples/react/optimistic-updates-typescript/src/pages/index.tsx
diff --git a/examples/react/optimistic-updates-typescript/tsconfig.json b/examples/react/optimistic-updates-typescript/tsconfig.json
index aebbceec22..d04e1b9de1 100644
--- a/examples/react/optimistic-updates-typescript/tsconfig.json
+++ b/examples/react/optimistic-updates-typescript/tsconfig.json
@@ -1,5 +1,4 @@
{
- "include": ["./pages/**/*"],
"compilerOptions": {
"strict": true,
"esModuleInterop": true,
@@ -16,5 +15,6 @@
"isolatedModules": true,
"incremental": true
},
+ "include": ["src"],
"exclude": ["node_modules"]
}
diff --git a/examples/react/pagination/pages/api/projects.js b/examples/react/pagination/src/pages/api/projects.js
old mode 100755
new mode 100644
similarity index 100%
rename from examples/react/pagination/pages/api/projects.js
rename to examples/react/pagination/src/pages/api/projects.js
diff --git a/examples/react/pagination/pages/index.js b/examples/react/pagination/src/pages/index.js
similarity index 100%
rename from examples/react/pagination/pages/index.js
rename to examples/react/pagination/src/pages/index.js
diff --git a/examples/react/playground/.prettierrc b/examples/react/playground/.prettierrc
deleted file mode 100644
index 9e26dfeeb6..0000000000
--- a/examples/react/playground/.prettierrc
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/examples/react/playground/package.json b/examples/react/playground/package.json
index 628a95dbb5..f7aeb72533 100644
--- a/examples/react/playground/package.json
+++ b/examples/react/playground/package.json
@@ -8,10 +8,10 @@
"preview": "vite preview"
},
"dependencies": {
- "react": "^18.2.0",
- "react-dom": "^18.2.0",
"@tanstack/react-query": "^5.0.0-alpha.38",
- "@tanstack/react-query-devtools": "^5.0.0-alpha.38"
+ "@tanstack/react-query-devtools": "^5.0.0-alpha.38",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.0.0",
diff --git a/examples/react/playground/src/index.jsx b/examples/react/playground/src/index.jsx
index 1bb801f72d..be22c2140f 100644
--- a/examples/react/playground/src/index.jsx
+++ b/examples/react/playground/src/index.jsx
@@ -1,5 +1,5 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
+import React from 'react'
+import ReactDOM from 'react-dom/client'
import {
QueryClient,
@@ -7,42 +7,40 @@ import {
useQuery,
useQueryClient,
useMutation,
-} from "@tanstack/react-query";
+} from '@tanstack/react-query'
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import "./styles.css";
+import './styles.css'
-let id = 0;
+let id = 0
let list = [
- "apple",
- "banana",
- "pineapple",
- "grapefruit",
- "dragonfruit",
- "grapes",
-].map((d) => ({ id: id++, name: d, notes: "These are some notes" }));
+ 'apple',
+ 'banana',
+ 'pineapple',
+ 'grapefruit',
+ 'dragonfruit',
+ 'grapes',
+].map((d) => ({ id: id++, name: d, notes: 'These are some notes' }))
-let errorRate = 0.05;
-let queryTimeMin = 1000;
-let queryTimeMax = 2000;
+let errorRate = 0.05
+let queryTimeMin = 1000
+let queryTimeMax = 2000
-const queryClient = new QueryClient();
+const queryClient = new QueryClient()
function Root() {
- const [staleTime, setStaleTime] = React.useState(1000);
- const [gcTime, setgcTime] = React.useState(3000);
- const [localErrorRate, setErrorRate] = React.useState(errorRate);
- const [localFetchTimeMin, setLocalFetchTimeMin] =
- React.useState(queryTimeMin);
- const [localFetchTimeMax, setLocalFetchTimeMax] =
- React.useState(queryTimeMax);
+ const [staleTime, setStaleTime] = React.useState(1000)
+ const [gcTime, setgcTime] = React.useState(3000)
+ const [localErrorRate, setErrorRate] = React.useState(errorRate)
+ const [localFetchTimeMin, setLocalFetchTimeMin] = React.useState(queryTimeMin)
+ const [localFetchTimeMax, setLocalFetchTimeMax] = React.useState(queryTimeMax)
React.useEffect(() => {
- errorRate = localErrorRate;
- queryTimeMin = localFetchTimeMin;
- queryTimeMax = localFetchTimeMax;
- }, [localErrorRate, localFetchTimeMax, localFetchTimeMin]);
+ errorRate = localErrorRate
+ queryTimeMin = localFetchTimeMin
+ queryTimeMax = localFetchTimeMax
+ }, [localErrorRate, localFetchTimeMax, localFetchTimeMin])
React.useEffect(() => {
queryClient.setDefaultOptions({
@@ -50,8 +48,8 @@ function Root() {
staleTime,
gcTime,
},
- });
- }, [gcTime, staleTime]);
+ })
+ }, [gcTime, staleTime])
return (
@@ -60,30 +58,30 @@ function Root() {
to show how query stale-ness and query caching work on a granular level
- Stale Time:{" "}
+ Stale Time:{' '}
- Garbage collection Time:{" "}
+ Garbage collection Time:{' '}
- Error Rate:{" "}
+ Error Rate:{' '}
- Fetch Time Min:{" "}
+ Fetch Time Min:{' '}
- Fetch Time Max:{" "}
+ Fetch Time Max:{' '}
- );
+ )
}
function App() {
- const queryClient = useQueryClient();
- const [editingIndex, setEditingIndex] = React.useState(null);
- const [views, setViews] = React.useState(["", "fruit", "grape"]);
+ const queryClient = useQueryClient()
+ const [editingIndex, setEditingIndex] = React.useState(null)
+ const [views, setViews] = React.useState(['', 'fruit', 'grape'])
// const [views, setViews] = React.useState([""]);
return (
@@ -145,7 +143,7 @@ function App() {
initialFilter={view}
setEditingIndex={setEditingIndex}
onRemove={() => {
- setViews((old) => [...old, ""]);
+ setViews((old) => [...old, ''])
}}
/>
{
- setViews((old) => [...old, ""]);
+ setViews((old) => [...old, ''])
}}
>
Add Filter List
@@ -170,28 +168,28 @@ function App() {
) : null}
- Filter:{" "}
+ Filter:{' '}
- {status === "pending" ? (
+ {status === 'pending' ? (
Loading... (Attempt: {failureCount + 1})
- ) : status === "error" ? (
+ ) : status === 'error' ? (
Error: {error.message}
- {todo.name}{" "}
+ {todo.name}{' '}
setEditingIndex(todo.id)}>
Edit
@@ -223,44 +221,44 @@ function Todos({ initialFilter = "", setEditingIndex }) {
)}
- );
+ )
}
function EditTodo({ editingIndex, setEditingIndex }) {
- const queryClient = useQueryClient();
+ const queryClient = useQueryClient()
// Don't attempt to query until editingIndex is truthy
const { status, data, isFetching, error, failureCount, refetch } = useQuery({
- queryKey: ["todo", { id: editingIndex }],
+ queryKey: ['todo', { id: editingIndex }],
queryFn: () => fetchTodoById({ id: editingIndex }),
enabled: editingIndex !== null,
- });
+ })
- const [todo, setTodo] = React.useState(data || {});
+ const [todo, setTodo] = React.useState(data || {})
React.useEffect(() => {
if (editingIndex !== null && data) {
- setTodo(data);
+ setTodo(data)
} else {
- setTodo({});
+ setTodo({})
}
- }, [data, editingIndex]);
+ }, [data, editingIndex])
const saveMutation = useMutation({
mutationFn: patchTodo,
onSuccess: (data) => {
// Update `todos` and the individual todo queries when this mutation succeeds
- queryClient.invalidateQueries({ queryKey: ["todos"] });
- queryClient.setQueryData(["todo", { id: editingIndex }], data);
+ queryClient.invalidateQueries({ queryKey: ['todos'] })
+ queryClient.setQueryData(['todo', { id: editingIndex }], data)
},
- });
+ })
const onSave = () => {
- saveMutation.mutate(todo);
- };
+ saveMutation.mutate(todo)
+ }
const disableEditSave =
- status === "pending" || saveMutation.status === "pending";
+ status === 'pending' || saveMutation.status === 'pending'
return (
@@ -273,7 +271,7 @@ function EditTodo({ editingIndex, setEditingIndex }) {
) : null}
- {status === "pending" ? (
+ {status === 'pending' ? (
Loading... (Attempt: {failureCount + 1})
) : error ? (
@@ -282,7 +280,7 @@ function EditTodo({ editingIndex, setEditingIndex }) {
) : (
<>
- Name:{" "}
+ Name:{' '}
- Notes:{" "}
+ Notes:{' '}
- {saveMutation.status === "pending"
- ? "Saving..."
- : saveMutation.status === "error"
+ {saveMutation.status === 'pending'
+ ? 'Saving...'
+ : saveMutation.status === 'error'
? saveMutation.error.message
- : "Saved!"}
+ : 'Saved!'}
{isFetching ? (
@@ -327,114 +325,114 @@ function EditTodo({ editingIndex, setEditingIndex }) {
)}
- );
+ )
}
function AddTodo() {
- const queryClient = useQueryClient();
- const [name, setName] = React.useState("");
+ const queryClient = useQueryClient()
+ const [name, setName] = React.useState('')
const addMutation = useMutation({
mutationFn: postTodo,
onSuccess: () => {
- queryClient.invalidateQueries({ queryKey: ["todos"] });
+ queryClient.invalidateQueries({ queryKey: ['todos'] })
},
- });
+ })
return (
- );
+ )
}
function fetchTodos({ signal, queryKey: [, { filter }] }) {
- console.info("fetchTodos", { filter });
+ console.info('fetchTodos', { filter })
if (signal) {
- signal.addEventListener("abort", () => {
- console.info("cancelled", filter);
- });
+ signal.addEventListener('abort', () => {
+ console.info('cancelled', filter)
+ })
}
return new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() < errorRate) {
return reject(
- new Error(JSON.stringify({ fetchTodos: { filter } }, null, 2))
- );
+ new Error(JSON.stringify({ fetchTodos: { filter } }, null, 2)),
+ )
}
- resolve(list.filter((d) => d.name.includes(filter)));
- }, queryTimeMin + Math.random() * (queryTimeMax - queryTimeMin));
- });
+ resolve(list.filter((d) => d.name.includes(filter)))
+ }, queryTimeMin + Math.random() * (queryTimeMax - queryTimeMin))
+ })
}
function fetchTodoById({ id }) {
- console.info("fetchTodoById", { id });
+ console.info('fetchTodoById', { id })
return new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() < errorRate) {
return reject(
- new Error(JSON.stringify({ fetchTodoById: { id } }, null, 2))
- );
+ new Error(JSON.stringify({ fetchTodoById: { id } }, null, 2)),
+ )
}
- resolve(list.find((d) => d.id === id));
- }, queryTimeMin + Math.random() * (queryTimeMax - queryTimeMin));
- });
+ resolve(list.find((d) => d.id === id))
+ }, queryTimeMin + Math.random() * (queryTimeMax - queryTimeMin))
+ })
}
function postTodo({ name, notes }) {
- console.info("postTodo", { name, notes });
+ console.info('postTodo', { name, notes })
return new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() < errorRate) {
return reject(
- new Error(JSON.stringify({ postTodo: { name, notes } }, null, 2))
- );
+ new Error(JSON.stringify({ postTodo: { name, notes } }, null, 2)),
+ )
}
- const todo = { name, notes, id: id++ };
- list = [...list, todo];
- resolve(todo);
- }, queryTimeMin + Math.random() * (queryTimeMax - queryTimeMin));
- });
+ const todo = { name, notes, id: id++ }
+ list = [...list, todo]
+ resolve(todo)
+ }, queryTimeMin + Math.random() * (queryTimeMax - queryTimeMin))
+ })
}
function patchTodo(todo) {
- console.info("patchTodo", todo);
+ console.info('patchTodo', todo)
return new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() < errorRate) {
- return reject(new Error(JSON.stringify({ patchTodo: todo }, null, 2)));
+ return reject(new Error(JSON.stringify({ patchTodo: todo }, null, 2)))
}
list = list.map((d) => {
if (d.id === todo.id) {
- return todo;
+ return todo
}
- return d;
- });
- resolve(todo);
- }, queryTimeMin + Math.random() * (queryTimeMax - queryTimeMin));
- });
+ return d
+ })
+ resolve(todo)
+ }, queryTimeMin + Math.random() * (queryTimeMax - queryTimeMin))
+ })
}
-const rootElement = document.getElementById("root");
-ReactDOM.createRoot(rootElement).render(
@@ -33,5 +33,5 @@ export default function App() {
- );
+ )
}
diff --git a/examples/react/react-native/babel.config.js b/examples/react/react-native/babel.config.js
index 9d89e13119..e1e3637afd 100644
--- a/examples/react/react-native/babel.config.js
+++ b/examples/react/react-native/babel.config.js
@@ -1,6 +1,6 @@
module.exports = function (api) {
- api.cache(true);
+ api.cache(true)
return {
presets: ['babel-preset-expo'],
- };
-};
+ }
+}
diff --git a/examples/react/react-native/src/components/Divider.tsx b/examples/react/react-native/src/components/Divider.tsx
index 7c3b5fa831..1ea2ee3839 100644
--- a/examples/react/react-native/src/components/Divider.tsx
+++ b/examples/react/react-native/src/components/Divider.tsx
@@ -1,13 +1,13 @@
-import * as React from 'react';
-import { StyleSheet } from 'react-native';
-import { Divider as PaperDivider } from 'react-native-paper';
+import * as React from 'react'
+import { StyleSheet } from 'react-native'
+import { Divider as PaperDivider } from 'react-native-paper'
export function Divider() {
- return
{message}
- );
+ )
}
const styles = StyleSheet.create({
@@ -19,4 +19,4 @@ const styles = StyleSheet.create({
justifyContent: 'center',
alignItems: 'center',
},
-});
+})
diff --git a/examples/react/react-native/src/components/ListItem.tsx b/examples/react/react-native/src/components/ListItem.tsx
index b6d0e2b546..ee52729efd 100644
--- a/examples/react/react-native/src/components/ListItem.tsx
+++ b/examples/react/react-native/src/components/ListItem.tsx
@@ -1,11 +1,11 @@
-import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { Paragraph, TouchableRipple } from 'react-native-paper';
+import * as React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { Paragraph, TouchableRipple } from 'react-native-paper'
type Props = {
- item: any;
- onPress: (item: any) => void;
-};
+ item: any
+ onPress: (item: any) => void
+}
export function ListItem({ item, onPress }: Props) {
return (
@@ -19,7 +19,7 @@ export function ListItem({ item, onPress }: Props) {
- );
+ )
}
const styles = StyleSheet.create({
@@ -38,4 +38,4 @@ const styles = StyleSheet.create({
marginBottom: 10,
},
title: { fontWeight: 'bold' },
-});
+})
diff --git a/examples/react/react-native/src/components/LoadingIndicator.tsx b/examples/react/react-native/src/components/LoadingIndicator.tsx
index 1068cbcf50..7bcdd99253 100644
--- a/examples/react/react-native/src/components/LoadingIndicator.tsx
+++ b/examples/react/react-native/src/components/LoadingIndicator.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
-import { ActivityIndicator, View, StyleSheet } from 'react-native';
+import * as React from 'react'
+import { ActivityIndicator, View, StyleSheet } from 'react-native'
export function LoadingIndicator() {
return (
- );
+ )
}
const styles = StyleSheet.create({
@@ -15,4 +15,4 @@ const styles = StyleSheet.create({
justifyContent: 'center',
alignItems: 'center',
},
-});
+})
diff --git a/examples/react/react-native/src/hooks/useAppState.ts b/examples/react/react-native/src/hooks/useAppState.ts
index eca5209a0a..2aad30f9ec 100644
--- a/examples/react/react-native/src/hooks/useAppState.ts
+++ b/examples/react/react-native/src/hooks/useAppState.ts
@@ -1,11 +1,11 @@
-import { useEffect } from 'react';
-import { AppState, AppStateStatus } from 'react-native';
+import { useEffect } from 'react'
+import { AppState, AppStateStatus } from 'react-native'
export function useAppState(onChange: (status: AppStateStatus) => void) {
useEffect(() => {
- AppState.addEventListener('change', onChange);
+ AppState.addEventListener('change', onChange)
return () => {
- AppState.removeEventListener('change', onChange);
- };
- }, [onChange]);
+ AppState.removeEventListener('change', onChange)
+ }
+ }, [onChange])
}
diff --git a/examples/react/react-native/src/hooks/useOnlineManager.ts b/examples/react/react-native/src/hooks/useOnlineManager.ts
index f6c9737bfe..ecaf74512e 100644
--- a/examples/react/react-native/src/hooks/useOnlineManager.ts
+++ b/examples/react/react-native/src/hooks/useOnlineManager.ts
@@ -1,7 +1,7 @@
-import * as React from 'react';
-import NetInfo from '@react-native-community/netinfo';
-import { onlineManager } from '@tanstack/react-query';
-import { Platform } from 'react-native';
+import * as React from 'react'
+import NetInfo from '@react-native-community/netinfo'
+import { onlineManager } from '@tanstack/react-query'
+import { Platform } from 'react-native'
export function useOnlineManager() {
React.useEffect(() => {
@@ -11,9 +11,9 @@ export function useOnlineManager() {
onlineManager.setOnline(
state.isConnected != null &&
state.isConnected &&
- Boolean(state.isInternetReachable)
- );
- });
+ Boolean(state.isInternetReachable),
+ )
+ })
}
- }, []);
+ }, [])
}
diff --git a/examples/react/react-native/src/hooks/useRefreshByUser.ts b/examples/react/react-native/src/hooks/useRefreshByUser.ts
index 44a561ca30..46fcea58a1 100644
--- a/examples/react/react-native/src/hooks/useRefreshByUser.ts
+++ b/examples/react/react-native/src/hooks/useRefreshByUser.ts
@@ -1,20 +1,20 @@
-import * as React from 'react';
+import * as React from 'react'
export function useRefreshByUser(refetch: () => Promise) {
- const [isRefetchingByUser, setIsRefetchingByUser] = React.useState(false);
+ const [isRefetchingByUser, setIsRefetchingByUser] = React.useState(false)
async function refetchByUser() {
- setIsRefetchingByUser(true);
+ setIsRefetchingByUser(true)
try {
- await refetch();
+ await refetch()
} finally {
- setIsRefetchingByUser(false);
+ setIsRefetchingByUser(false)
}
}
return {
isRefetchingByUser,
refetchByUser,
- };
+ }
}
diff --git a/examples/react/react-native/src/hooks/useRefreshOnFocus.ts b/examples/react/react-native/src/hooks/useRefreshOnFocus.ts
index a8e93a44eb..dd9cbd3ea1 100644
--- a/examples/react/react-native/src/hooks/useRefreshOnFocus.ts
+++ b/examples/react/react-native/src/hooks/useRefreshOnFocus.ts
@@ -1,16 +1,16 @@
-import * as React from 'react';
-import { useFocusEffect } from '@react-navigation/native';
+import * as React from 'react'
+import { useFocusEffect } from '@react-navigation/native'
export function useRefreshOnFocus(refetch: () => void) {
- const enabledRef = React.useRef(false);
+ const enabledRef = React.useRef(false)
useFocusEffect(
React.useCallback(() => {
if (enabledRef.current) {
- refetch();
+ refetch()
} else {
- enabledRef.current = true;
+ enabledRef.current = true
}
- }, [refetch])
- );
+ }, [refetch]),
+ )
}
diff --git a/examples/react/react-native/src/lib/api.ts b/examples/react/react-native/src/lib/api.ts
index 2cc654b89e..fe7f2c927c 100644
--- a/examples/react/react-native/src/lib/api.ts
+++ b/examples/react/react-native/src/lib/api.ts
@@ -1,44 +1,44 @@
-import movies from '../data/movies.json';
+import movies from '../data/movies.json'
export type Movie = {
- title: string;
- year: number;
-};
+ title: string
+ year: number
+}
export type MovieDetails = Movie & {
info: {
- plot: string;
- actors: string[];
- };
-};
+ plot: string
+ actors: string[]
+ }
+}
function delay(t: number) {
return new Promise(function (resolve) {
- setTimeout(resolve, t);
- });
+ setTimeout(resolve, t)
+ })
}
export async function fetchMovies() {
- console.log('fetchMovies');
+ console.log('fetchMovies')
- await delay(200 + Math.floor(Math.random() * 2000));
+ await delay(200 + Math.floor(Math.random() * 2000))
return movies
.slice(0, 100)
.map((movie) => ({ title: movie.title, year: movie.year })) as Promise<
Movie[]
- >;
+ >
}
export async function fetchMovie(title: string) {
- console.log('fetchMovie', title);
+ console.log('fetchMovie', title)
- await delay(200 + Math.floor(Math.random() * 2000));
+ await delay(200 + Math.floor(Math.random() * 2000))
- const result = movies.filter((item) => item.title === title);
+ const result = movies.filter((item) => item.title === title)
if (result.length == 0) {
- throw new Error('Movie not found');
+ throw new Error('Movie not found')
}
- return result[0] as Promise;
+ return result[0] as Promise
}
diff --git a/examples/react/react-native/src/navigation/MoviesStack.tsx b/examples/react/react-native/src/navigation/MoviesStack.tsx
index 69f7851458..364126feb9 100644
--- a/examples/react/react-native/src/navigation/MoviesStack.tsx
+++ b/examples/react/react-native/src/navigation/MoviesStack.tsx
@@ -1,11 +1,11 @@
-import * as React from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
+import * as React from 'react'
+import { createStackNavigator } from '@react-navigation/stack'
-import { MoviesListScreen } from '../screens/MoviesListScreen';
-import { MovieDetailsScreen } from '../screens/MovieDetailsScreen';
-import { MoviesStackNavigator } from './types';
+import { MoviesListScreen } from '../screens/MoviesListScreen'
+import { MovieDetailsScreen } from '../screens/MovieDetailsScreen'
+import { MoviesStackNavigator } from './types'
-const Stack = createStackNavigator();
+const Stack = createStackNavigator()
export function MoviesStack() {
return (
@@ -25,5 +25,5 @@ export function MoviesStack() {
}}
/>
- );
+ )
}
diff --git a/examples/react/react-native/src/navigation/types.ts b/examples/react/react-native/src/navigation/types.ts
index a8f4c28d06..2967bf0d5c 100644
--- a/examples/react/react-native/src/navigation/types.ts
+++ b/examples/react/react-native/src/navigation/types.ts
@@ -1,6 +1,6 @@
-import { Movie } from '../lib/api';
+import { Movie } from '../lib/api'
export type MoviesStackNavigator = {
- MoviesList: undefined;
- MovieDetails: { movie: Movie };
-};
+ MoviesList: undefined
+ MovieDetails: { movie: Movie }
+}
diff --git a/examples/react/react-native/src/screens/MovieDetailsScreen.tsx b/examples/react/react-native/src/screens/MovieDetailsScreen.tsx
index d95d96cc19..643968fb56 100644
--- a/examples/react/react-native/src/screens/MovieDetailsScreen.tsx
+++ b/examples/react/react-native/src/screens/MovieDetailsScreen.tsx
@@ -1,38 +1,38 @@
-import * as React from 'react';
-import { View, RefreshControl, StyleSheet, ScrollView } from 'react-native';
-import { Title, Paragraph } from 'react-native-paper';
-import { StackNavigationProp } from '@react-navigation/stack';
-import { RouteProp } from '@react-navigation/native';
-import { useQuery } from '@tanstack/react-query';
+import * as React from 'react'
+import { View, RefreshControl, StyleSheet, ScrollView } from 'react-native'
+import { Title, Paragraph } from 'react-native-paper'
+import { StackNavigationProp } from '@react-navigation/stack'
+import { RouteProp } from '@react-navigation/native'
+import { useQuery } from '@tanstack/react-query'
-import { LoadingIndicator } from '../components/LoadingIndicator';
-import { ErrorMessage } from '../components/ErrorMessage';
-import { useRefreshByUser } from '../hooks/useRefreshByUser';
-import { fetchMovie, MovieDetails } from '../lib/api';
-import type { MoviesStackNavigator } from '../navigation/types';
+import { LoadingIndicator } from '../components/LoadingIndicator'
+import { ErrorMessage } from '../components/ErrorMessage'
+import { useRefreshByUser } from '../hooks/useRefreshByUser'
+import { fetchMovie, MovieDetails } from '../lib/api'
+import type { MoviesStackNavigator } from '../navigation/types'
type MoviesDetailsScreenNavigationProp = StackNavigationProp<
MoviesStackNavigator,
'MovieDetails'
->;
+>
type Props = {
- navigation: MoviesDetailsScreenNavigationProp;
- route: RouteProp;
-};
+ navigation: MoviesDetailsScreenNavigationProp
+ route: RouteProp
+}
export function MovieDetailsScreen({ route }: Props) {
const { isPending, error, data, refetch } = useQuery({
queryKey: ['movie', route.params.movie.title],
queryFn: () => fetchMovie(route.params.movie.title),
initialData: route.params.movie as MovieDetails,
- });
+ })
- const { isRefetchingByUser, refetchByUser } = useRefreshByUser(refetch);
+ const { isRefetchingByUser, refetchByUser } = useRefreshByUser(refetch)
- if (isPending) return ({
queryKey: ['movies'],
queryFn: fetchMovies,
- });
- const { isRefetchingByUser, refetchByUser } = useRefreshByUser(refetch);
- useRefreshOnFocus(refetch);
+ })
+ const { isRefetchingByUser, refetchByUser } = useRefreshByUser(refetch)
+ useRefreshOnFocus(refetch)
const onListItemPress = React.useCallback(
(movie) => {
navigation.navigate('MovieDetails', {
movie,
- });
+ })
},
- [navigation]
- );
+ [navigation],
+ )
const renderItem = React.useCallback(
({ item }) => {
- return
@@ -13,5 +13,5 @@ export default function ErrorPage() {
{error.statusText || error.message}
- );
+ )
}
diff --git a/examples/react/react-router/src/index.jsx b/examples/react/react-router/src/index.jsx
index edae2fcde1..0482c714d0 100644
--- a/examples/react/react-router/src/index.jsx
+++ b/examples/react/react-router/src/index.jsx
@@ -1,23 +1,20 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom/client";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import * as React from 'react'
+import * as ReactDOM from 'react-dom/client'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import "./index.css";
+import './index.css'
-import ErrorPage from "./error-page";
-import Root, {
- loader as rootLoader,
- action as rootAction,
-} from "./routes/root";
+import ErrorPage from './error-page'
+import Root, { loader as rootLoader, action as rootAction } from './routes/root'
import Contact, {
loader as contactLoader,
action as contactAction,
-} from "./routes/contact";
-import EditContact, { action as editAction } from "./routes/edit";
-import { action as destroyAction } from "./routes/destroy";
-import Index from "./routes/index";
+} from './routes/contact'
+import EditContact, { action as editAction } from './routes/edit'
+import { action as destroyAction } from './routes/destroy'
+import Index from './routes/index'
const queryClient = new QueryClient({
defaultOptions: {
@@ -25,11 +22,11 @@ const queryClient = new QueryClient({
staleTime: 1000 * 10,
},
},
-});
+})
const router = createBrowserRouter([
{
- path: "/",
+ path: '/',
element: Oops! There was an error.
,
},
],
},
-]);
+])
-const rootElement = document.getElementById("root");
+const rootElement = document.getElementById('root')
ReactDOM.createRoot(rootElement).render(
-
-);
+ ,
+)
diff --git a/examples/react/react-router/src/routes/contact.jsx b/examples/react/react-router/src/routes/contact.jsx
index a841699a63..9164f1b55f 100644
--- a/examples/react/react-router/src/routes/contact.jsx
+++ b/examples/react/react-router/src/routes/contact.jsx
@@ -1,46 +1,46 @@
-import * as React from "react";
-import { Form, useFetcher, useParams } from "react-router-dom";
-import { getContact, updateContact } from "../contacts";
-import { useQuery } from "@tanstack/react-query";
+import * as React from 'react'
+import { Form, useFetcher, useParams } from 'react-router-dom'
+import { getContact, updateContact } from '../contacts'
+import { useQuery } from '@tanstack/react-query'
const contactDetailQuery = (id) => ({
- queryKey: ["contacts", "detail", id],
+ queryKey: ['contacts', 'detail', id],
queryFn: async () => {
- const contact = await getContact(id);
+ const contact = await getContact(id)
if (!contact) {
- throw new Response("", {
+ throw new Response('', {
status: 404,
- statusText: "Not Found",
- });
+ statusText: 'Not Found',
+ })
}
- return contact;
+ return contact
},
-});
+})
export const loader =
(queryClient) =>
async ({ params }) => {
- const query = contactDetailQuery(params.contactId);
+ const query = contactDetailQuery(params.contactId)
return (
queryClient.getQueryData(query.queryKey) ??
(await queryClient.fetchQuery(query))
- );
- };
+ )
+ }
export const action =
(queryClient) =>
async ({ request, params }) => {
- let formData = await request.formData();
+ let formData = await request.formData()
const contact = await updateContact(params.contactId, {
- favorite: formData.get("favorite") === "true",
- });
- await queryClient.invalidateQueries({ queryKey: ["contacts"] });
- return contact;
- };
+ favorite: formData.get('favorite') === 'true',
+ })
+ await queryClient.invalidateQueries({ queryKey: ['contacts'] })
+ return contact
+ }
export default function Contact() {
- const params = useParams();
- const { data: contact } = useQuery(contactDetailQuery(params.contactId));
+ const params = useParams()
+ const { data: contact } = useQuery(contactDetailQuery(params.contactId))
return (
@@ -56,7 +56,7 @@ export default function Contact() {
) : (
No Name
- )}{" "}
+ )}{' '}
- );
+ )
}
function Favorite({ contact }) {
- const fetcher = useFetcher();
- let favorite = contact.favorite;
+ const fetcher = useFetcher()
+ let favorite = contact.favorite
if (fetcher.formData) {
- favorite = fetcher.formData.get("favorite") === "true";
+ favorite = fetcher.formData.get('favorite') === 'true'
}
return (
- {favorite ? "★" : "☆"}
+ {favorite ? '★' : '☆'}
- );
+ )
}
diff --git a/examples/react/react-router/src/routes/destroy.jsx b/examples/react/react-router/src/routes/destroy.jsx
index 5b95f69b87..5b5f0cbc87 100644
--- a/examples/react/react-router/src/routes/destroy.jsx
+++ b/examples/react/react-router/src/routes/destroy.jsx
@@ -1,10 +1,10 @@
-import { redirect } from "react-router-dom";
-import { deleteContact } from "../contacts";
+import { redirect } from 'react-router-dom'
+import { deleteContact } from '../contacts'
export const action =
(queryClient) =>
async ({ params }) => {
- await deleteContact(params.contactId);
- queryClient.invalidateQueries({ queryKey: ["contacts"] });
- return redirect("/");
- };
+ await deleteContact(params.contactId)
+ queryClient.invalidateQueries({ queryKey: ['contacts'] })
+ return redirect('/')
+ }
diff --git a/examples/react/react-router/src/routes/edit.jsx b/examples/react/react-router/src/routes/edit.jsx
index f1d9c64f86..693083d9d0 100644
--- a/examples/react/react-router/src/routes/edit.jsx
+++ b/examples/react/react-router/src/routes/edit.jsx
@@ -1,21 +1,21 @@
-import * as React from "react";
-import { Form, useLoaderData, redirect, useNavigate } from "react-router-dom";
+import * as React from 'react'
+import { Form, useLoaderData, redirect, useNavigate } from 'react-router-dom'
-import { updateContact } from "../contacts";
+import { updateContact } from '../contacts'
export const action =
(queryClient) =>
async ({ request, params }) => {
- const formData = await request.formData();
- const updates = Object.fromEntries(formData);
- await updateContact(params.contactId, updates);
- queryClient.invalidateQueries({ queryKey: ["contacts"] });
- return redirect(`/contacts/${params.contactId}`);
- };
+ const formData = await request.formData()
+ const updates = Object.fromEntries(formData)
+ await updateContact(params.contactId, updates)
+ queryClient.invalidateQueries({ queryKey: ['contacts'] })
+ return redirect(`/contacts/${params.contactId}`)
+ }
export default function Edit() {
- const contact = useLoaderData();
- const navigate = useNavigate();
+ const contact = useLoaderData()
+ const navigate = useNavigate()
return (
- );
+ )
}
diff --git a/examples/react/react-router/src/routes/index.jsx b/examples/react/react-router/src/routes/index.jsx
index 163f2c7de1..5ebb2312c2 100644
--- a/examples/react/react-router/src/routes/index.jsx
+++ b/examples/react/react-router/src/routes/index.jsx
@@ -1,18 +1,18 @@
-import * as React from "react";
+import * as React from 'react'
export default function Index() {
return (
This is a demo for integrating React Router with React Query.
the docs at reactrouter.com
- and{" "}
+ and{' '}
the docs at tanstack.com
.
- );
+ )
}
diff --git a/examples/react/react-router/src/routes/root.jsx b/examples/react/react-router/src/routes/root.jsx
index 0ced904091..1fab17f85d 100644
--- a/examples/react/react-router/src/routes/root.jsx
+++ b/examples/react/react-router/src/routes/root.jsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react'
import {
Outlet,
useLoaderData,
@@ -6,42 +6,42 @@ import {
NavLink,
useNavigation,
useSubmit,
-} from "react-router-dom";
-import { useDebounce } from "rooks";
+} from 'react-router-dom'
+import { useDebounce } from 'rooks'
-import { createContact, getContacts } from "../contacts";
-import { useQuery, useIsFetching } from "@tanstack/react-query";
+import { createContact, getContacts } from '../contacts'
+import { useQuery, useIsFetching } from '@tanstack/react-query'
const contactListQuery = (q) => ({
- queryKey: ["contacts", "list", q ?? "all"],
+ queryKey: ['contacts', 'list', q ?? 'all'],
queryFn: () => getContacts(q),
-});
+})
export const loader =
(queryClient) =>
async ({ request }) => {
- const url = new URL(request.url);
- const q = url.searchParams.get("q");
+ const url = new URL(request.url)
+ const q = url.searchParams.get('q')
if (!queryClient.getQueryData(contactListQuery(q).queryKey)) {
- await queryClient.fetchQuery(contactListQuery(q));
+ await queryClient.fetchQuery(contactListQuery(q))
}
- return { q };
- };
+ return { q }
+ }
export const action = (queryClient) => async () => {
- const contact = await createContact();
- queryClient.invalidateQueries({ queryKey: ["contacts", "list"] });
- return contact;
-};
+ const contact = await createContact()
+ queryClient.invalidateQueries({ queryKey: ['contacts', 'list'] })
+ return contact
+}
export default function Root() {
- const { q } = useLoaderData();
- const { data: contacts } = useQuery(contactListQuery(q));
- const searching = useIsFetching({ queryKey: ["contacts", "list"] }) > 0;
- const navigation = useNavigation();
- const submit = useSubmit();
+ const { q } = useLoaderData()
+ const { data: contacts } = useQuery(contactListQuery(q))
+ const searching = useIsFetching({ queryKey: ['contacts', 'list'] }) > 0
+ const navigation = useNavigation()
+ const submit = useSubmit()
- const debouncedSubmit = useDebounce(submit, 500);
+ const debouncedSubmit = useDebounce(submit, 500)
return (
<>
@@ -58,9 +58,9 @@ export default function Root() {
key={q}
autoFocus
defaultValue={q}
- className={searching ? "loading" : ""}
+ className={searching ? 'loading' : ''}
onChange={(event) => {
- debouncedSubmit(event.currentTarget.form);
+ debouncedSubmit(event.currentTarget.form)
}}
/>
@@ -78,7 +78,7 @@ export default function Root() {
- isActive ? "active" : isPending ? "pending" : ""
+ isActive ? 'active' : isPending ? 'pending' : ''
}
>
{contact.first || contact.last ? (
@@ -87,7 +87,7 @@ export default function Root() {
) : (
No Name
- )}{" "}
+ )}{' '}
{contact.favorite && ★ }
@@ -102,10 +102,10 @@ export default function Root() {
- );
+ )
}
diff --git a/examples/react/rick-morty/.prettierrc b/examples/react/rick-morty/.prettierrc
deleted file mode 100644
index 0967ef424b..0000000000
--- a/examples/react/rick-morty/.prettierrc
+++ /dev/null
@@ -1 +0,0 @@
-{}
diff --git a/examples/react/rick-morty/src/App.jsx b/examples/react/rick-morty/src/App.jsx
index 1df8647669..044d7cd145 100644
--- a/examples/react/rick-morty/src/App.jsx
+++ b/examples/react/rick-morty/src/App.jsx
@@ -1,15 +1,15 @@
-import React from "react";
-import { BrowserRouter as Router } from "react-router-dom";
-import { ThemeProvider } from "@mui/material";
-import { createMuiTheme } from "@mui/material/styles";
+import React from 'react'
+import { BrowserRouter as Router } from 'react-router-dom'
+import { ThemeProvider } from '@mui/material'
+import { createMuiTheme } from '@mui/material/styles'
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import "./styles.css";
-import Layout from "./Layout";
+import './styles.css'
+import Layout from './Layout'
-const queryClient = new QueryClient();
+const queryClient = new QueryClient()
export default function App() {
return (
@@ -21,28 +21,28 @@ export default function App() {
- );
+ )
}
const theme = createMuiTheme({
typography: {
h1: {
- fontFamily: "Roboto Mono, monospace",
+ fontFamily: 'Roboto Mono, monospace',
},
h2: {
- fontFamily: "Roboto Mono, monospace",
+ fontFamily: 'Roboto Mono, monospace',
},
h3: {
- fontFamily: "Roboto Mono, monospace",
+ fontFamily: 'Roboto Mono, monospace',
},
h4: {
- fontFamily: "Roboto Mono, monospace",
+ fontFamily: 'Roboto Mono, monospace',
},
h5: {
- fontFamily: "Roboto Mono, monospace",
+ fontFamily: 'Roboto Mono, monospace',
},
h6: {
- fontFamily: "Roboto Mono, monospace",
+ fontFamily: 'Roboto Mono, monospace',
},
},
-});
+})
diff --git a/examples/react/rick-morty/src/Character.jsx b/examples/react/rick-morty/src/Character.jsx
index 242dd83f22..965e8d2a97 100644
--- a/examples/react/rick-morty/src/Character.jsx
+++ b/examples/react/rick-morty/src/Character.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react'
import {
Typography,
Link,
@@ -9,29 +9,29 @@ import {
TableHead,
TableRow,
Paper,
-} from "@mui/material";
-import { useParams, Link as RouterLink } from "react-router-dom";
-import { useQuery } from "@tanstack/react-query";
-import fetch from "./fetch";
+} from '@mui/material'
+import { useParams, Link as RouterLink } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import fetch from './fetch'
function Character() {
- const { characterId } = useParams();
+ const { characterId } = useParams()
const { status, data } = useQuery({
- queryKey: ["character", characterId],
+ queryKey: ['character', characterId],
queryFn: () =>
fetch(`https://rickandmortyapi.com/api/character/${characterId}`),
- });
+ })
- if (status === "pending") return Loading...
;
- if (status === "error") return Error :(
;
+ if (status === 'pending') return Loading...
+ if (status === 'error') return Error :(
- const locationUrlPars = data.location.url.split("/").filter(Boolean);
- const locationId = locationUrlPars[locationUrlPars.length - 1];
+ const locationUrlPars = data.location.url.split('/').filter(Boolean)
+ const locationId = locationUrlPars[locationUrlPars.length - 1]
return (
{data.name}
-
+
@@ -68,23 +68,23 @@ function Character() {
Episodes
{data.episode.map((episode) => {
- const episodeUrlParts = episode.split("/").filter(Boolean);
- const episodeId = episodeUrlParts[episodeUrlParts.length - 1];
+ const episodeUrlParts = episode.split('/').filter(Boolean)
+ const episodeId = episodeUrlParts[episodeUrlParts.length - 1]
- return Loading...
;
- if (status === "error") return Error :(
;
+ if (status === 'pending') return Loading...
+ if (status === 'error') return Error :(
return (
<>
{data.name} - {data.type}
- );
+ )
}
-export default Character;
+export default Character
diff --git a/examples/react/rick-morty/src/Characters.jsx b/examples/react/rick-morty/src/Characters.jsx
index 5995c38b0c..ea3b543000 100644
--- a/examples/react/rick-morty/src/Characters.jsx
+++ b/examples/react/rick-morty/src/Characters.jsx
@@ -1,34 +1,34 @@
-import React from "react";
-import { Typography, Link } from "@mui/material";
-import { Link as RouterLink } from "react-router-dom";
-import { useQuery } from "@tanstack/react-query";
-import fetch from "./fetch";
+import React from 'react'
+import { Typography, Link } from '@mui/material'
+import { Link as RouterLink } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import fetch from './fetch'
export default function Characters() {
const { status, data } = useQuery({
- queryKey: ["characters"],
- queryFn: () => fetch("https://rickandmortyapi.com/api/character/"),
- });
+ queryKey: ['characters'],
+ queryFn: () => fetch('https://rickandmortyapi.com/api/character/'),
+ })
- if (status === "pending") return Loading...
;
- if (status === "error") return Error :(
;
+ if (status === 'pending') return Loading...
+ if (status === 'error') return Error :(
- console.info(data);
+ console.info(data)
return (
Characters
{data.results.map((person) => {
return (
-
+
{person.name} - {person.gender}: {person.species}
- );
+ )
})}
- );
+ )
}
diff --git a/examples/react/rick-morty/src/Episode.jsx b/examples/react/rick-morty/src/Episode.jsx
index 2319bbc807..3e66a0cc08 100644
--- a/examples/react/rick-morty/src/Episode.jsx
+++ b/examples/react/rick-morty/src/Episode.jsx
@@ -1,19 +1,19 @@
-import React from "react";
-import { Typography, Link } from "@mui/material";
-import { useParams, Link as RouterLink } from "react-router-dom";
-import { useQuery } from "@tanstack/react-query";
-import fetch from "./fetch";
+import React from 'react'
+import { Typography, Link } from '@mui/material'
+import { useParams, Link as RouterLink } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import fetch from './fetch'
function Episode() {
- const { episodeId } = useParams();
+ const { episodeId } = useParams()
const { data, status } = useQuery({
- queryKey: ["episode", episodeId],
+ queryKey: ['episode', episodeId],
queryFn: () =>
fetch(`https://rickandmortyapi.com/api/episode/${episodeId}`),
- });
+ })
- if (status === "pending") return Loading...
;
- if (status === "error") return Error :(
;
+ if (status === 'pending') return Loading...
+ if (status === 'error') return Error :(
return (
@@ -22,22 +22,22 @@ function Episode() {
Characters
{data.characters.map((character) => {
- const characterUrlParts = character.split("/").filter(Boolean);
- const characterId = characterUrlParts[characterUrlParts.length - 1];
- return
- );
+ )
}
function Character({ id }) {
const { data, status } = useQuery({
- queryKey: ["character", id],
+ queryKey: ['character', id],
queryFn: () => fetch(`https://rickandmortyapi.com/api/character/${id}`),
- });
+ })
- if (status === "pending") return Loading...
;
- if (status === "error") return Error :(
;
+ if (status === 'pending') return Loading...
+ if (status === 'error') return Error :(
return (
@@ -45,7 +45,7 @@ function Character({ id }) {
{data.name}
- );
+ )
}
-export default Episode;
+export default Episode
diff --git a/examples/react/rick-morty/src/Episodes.jsx b/examples/react/rick-morty/src/Episodes.jsx
index db1a4d0812..9b8f692436 100644
--- a/examples/react/rick-morty/src/Episodes.jsx
+++ b/examples/react/rick-morty/src/Episodes.jsx
@@ -1,20 +1,20 @@
-import React from "react";
-import { Typography, Link } from "@mui/material";
-import { Link as RouterLink } from "react-router-dom";
-import { useQuery } from "@tanstack/react-query";
-import fetch from "./fetch";
+import React from 'react'
+import { Typography, Link } from '@mui/material'
+import { Link as RouterLink } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import fetch from './fetch'
export default function Episodes() {
const { data, status } = useQuery({
- queryKey: ["episodes"],
- queryFn: () => fetch("https://rickandmortyapi.com/api/episode"),
- });
+ queryKey: ['episodes'],
+ queryFn: () => fetch('https://rickandmortyapi.com/api/episode'),
+ })
- if (status === "pending") {
- return Loading...
;
+ if (status === 'pending') {
+ return Loading...
}
- if (status === "error") {
- return Error :(
;
+ if (status === 'error') {
+ return Error :(
}
return (
@@ -30,5 +30,5 @@ export default function Episodes() {
))}
- );
+ )
}
diff --git a/examples/react/rick-morty/src/Home.jsx b/examples/react/rick-morty/src/Home.jsx
index 5f87ca15f6..3661e86060 100644
--- a/examples/react/rick-morty/src/Home.jsx
+++ b/examples/react/rick-morty/src/Home.jsx
@@ -1,11 +1,11 @@
-import React from "react";
-import { Typography } from "@mui/material";
-import { makeStyles } from "@mui/styles";
-import { Link } from "@mui/material";
-import { Link as RouterLink } from "react-router-dom";
+import React from 'react'
+import { Typography } from '@mui/material'
+import { makeStyles } from '@mui/styles'
+import { Link } from '@mui/material'
+import { Link as RouterLink } from 'react-router-dom'
export default function Home() {
- const classes = useStyles();
+ const classes = useStyles()
return (
@@ -26,16 +26,16 @@ export default function Home() {
tag them as observable.
- Simply associate a key with your fetch call and let{" "}
+ Simply associate a key with your fetch call and let{' '}
React Query handle the rest.
Ready to get started?
- Check out the{" "}
+ Check out the{' '}
- );
+ )
}
const useStyles = makeStyles(() => ({
main: {
- margin: "44px 0",
- "& p": {
- margin: "12px 0 24px",
+ margin: '44px 0',
+ '& p': {
+ margin: '12px 0 24px',
},
},
-}));
+}))
diff --git a/examples/react/rick-morty/src/Layout.jsx b/examples/react/rick-morty/src/Layout.jsx
index f83953f473..b33a76a9d3 100644
--- a/examples/react/rick-morty/src/Layout.jsx
+++ b/examples/react/rick-morty/src/Layout.jsx
@@ -1,15 +1,15 @@
-import React from "react";
-import Episodes from "./Episodes";
-import Episode from "./Episode";
-import Characters from "./Characters";
-import Character from "./Character";
-import Home from "./Home";
-import { Link, Button } from "@mui/material";
-import { makeStyles } from "@mui/styles";
-import { Routes, Route, Link as RouterLink } from "react-router-dom";
+import React from 'react'
+import Episodes from './Episodes'
+import Episode from './Episode'
+import Characters from './Characters'
+import Character from './Character'
+import Home from './Home'
+import { Link, Button } from '@mui/material'
+import { makeStyles } from '@mui/styles'
+import { Routes, Route, Link as RouterLink } from 'react-router-dom'
export default function Layout() {
- const classes = useStyles();
+ const classes = useStyles()
return (
@@ -38,21 +38,21 @@ export default function Layout() {
- );
+ )
}
const useStyles = makeStyles((theme) => ({
main: {
- margin: "0 auto",
- padding: "16px",
+ margin: '0 auto',
+ padding: '16px',
},
menu: {
- margin: "0 auto",
- display: "flex",
- justifyContent: "center",
- backgroundColor: "#CCC",
- "& button": {
+ margin: '0 auto',
+ display: 'flex',
+ justifyContent: 'center',
+ backgroundColor: '#CCC',
+ '& button': {
margin: theme.spacing(1),
},
},
-}));
+}))
diff --git a/examples/react/rick-morty/src/fetch.jsx b/examples/react/rick-morty/src/fetch.jsx
index a34e54669d..6a1fe60ab5 100644
--- a/examples/react/rick-morty/src/fetch.jsx
+++ b/examples/react/rick-morty/src/fetch.jsx
@@ -1,4 +1,4 @@
export default async function (...args) {
- const res = await fetch(...args);
- return await res.json();
+ const res = await fetch(...args)
+ return await res.json()
}
diff --git a/examples/react/rick-morty/src/index.jsx b/examples/react/rick-morty/src/index.jsx
index bb0b9407de..03066f37fc 100644
--- a/examples/react/rick-morty/src/index.jsx
+++ b/examples/react/rick-morty/src/index.jsx
@@ -1,7 +1,7 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
+import React from 'react'
+import ReactDOM from 'react-dom/client'
-import App from "./App";
+import App from './App'
-const rootElement = document.getElementById("root");
-ReactDOM.createRoot(rootElement).render(
- );
+ )
}
function Example() {
const { isPending, error, data, isFetching } = useQuery({
- queryKey: ["repoData"],
+ queryKey: ['repoData'],
queryFn: () =>
axios
- .get("https://api.github.com/repos/tannerlinsley/react-query")
+ .get('https://api.github.com/repos/tannerlinsley/react-query')
.then((res) => res.data),
- });
+ })
- if (isPending) return "Loading...";
+ if (isPending) return 'Loading...'
- if (error) return "An error has occurred: " + error.message;
+ if (error) return 'An error has occurred: ' + error.message
return (
{data.name}
{data.description}
-
👀 {data.subscribers_count} {" "}
-
✨ {data.stargazers_count} {" "}
+
👀 {data.subscribers_count} {' '}
+
✨ {data.stargazers_count} {' '}
🍴 {data.forks_count}
-
{isFetching ? "Updating..." : ""}
+
{isFetching ? 'Updating...' : ''}
- );
+ )
}
-const rootElement = document.getElementById("root");
-ReactDOM.createRoot(rootElement).render(Loading...
;
- if (status === "error") return Error :(
;
+ if (status === 'pending') return Loading...
+ if (status === 'error') return Error :(
- console.info({ data, status, error });
- const homeworldUrlParts = data.homeworld.split("/").filter(Boolean);
- const homeworldId = homeworldUrlParts[homeworldUrlParts.length - 1];
+ console.info({ data, status, error })
+ const homeworldUrlParts = data.homeworld.split('/').filter(Boolean)
+ const homeworldId = homeworldUrlParts[homeworldUrlParts.length - 1]
- if (status !== "success") {
- return null;
+ if (status !== 'success') {
+ return null
}
return (
{data.name}
-
+
@@ -76,23 +76,23 @@ function Character() {
Films
{data.films.map((film) => {
- const filmUrlParts = film.split("/").filter(Boolean);
- const filmId = filmUrlParts[filmUrlParts.length - 1];
- return
@@ -102,21 +102,21 @@ function Film(props) {
- );
+ )
}
function Homeworld(props) {
- const { id } = props;
+ const { id } = props
const { data, status } = useQuery({
- queryKey: ["homeworld", id],
+ queryKey: ['homeworld', id],
queryFn: () => fetch(`https://swapi.dev/api/planets/${id}/`),
- });
+ })
- if (status !== "success") {
- return null;
+ if (status !== 'success') {
+ return null
}
- return data.name;
+ return data.name
}
-export default Character;
+export default Character
diff --git a/examples/react/star-wars/src/Characters.jsx b/examples/react/star-wars/src/Characters.jsx
index 8c0e0a29bc..f66d82a1c5 100644
--- a/examples/react/star-wars/src/Characters.jsx
+++ b/examples/react/star-wars/src/Characters.jsx
@@ -1,32 +1,32 @@
-import React from "react";
-import { Typography, Link } from "@mui/material";
-import { Link as RouterLink } from "react-router-dom";
-import { useQuery } from "@tanstack/react-query";
-import fetch from "./fetch";
+import React from 'react'
+import { Typography, Link } from '@mui/material'
+import { Link as RouterLink } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import fetch from './fetch'
export default function Characters(props) {
const { status, error, data } = useQuery({
- queryKey: ["characters"],
+ queryKey: ['characters'],
queryFn: () => fetch(`https://swapi.dev/api/people/`),
- });
+ })
- if (status === "pending") return Loading...
;
- if (status === "error") return Error :(
;
+ if (status === 'pending') return Loading...
+ if (status === 'error') return Error :(
return (
Characters
{data.results.map((person) => {
- const personUrlParts = person.url.split("/").filter(Boolean);
- const personId = personUrlParts[personUrlParts.length - 1];
+ const personUrlParts = person.url.split('/').filter(Boolean)
+ const personId = personUrlParts[personUrlParts.length - 1]
return (
-
+
{person.name}
- );
+ )
})}
- );
+ )
}
diff --git a/examples/react/star-wars/src/Film.jsx b/examples/react/star-wars/src/Film.jsx
index faf127b45b..e09426bf3d 100644
--- a/examples/react/star-wars/src/Film.jsx
+++ b/examples/react/star-wars/src/Film.jsx
@@ -1,24 +1,24 @@
-import React from "react";
-import { Typography, Link } from "@mui/material";
-import { useParams, Link as RouterLink } from "react-router-dom";
-import { useQuery } from "@tanstack/react-query";
-import fetch from "./fetch";
+import React from 'react'
+import { Typography, Link } from '@mui/material'
+import { useParams, Link as RouterLink } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import fetch from './fetch'
function Film() {
- let params = useParams();
- const filmId = params.filmId;
+ let params = useParams()
+ const filmId = params.filmId
const { data, status, error } = useQuery({
- queryKey: ["film", filmId],
+ queryKey: ['film', filmId],
queryFn: () => fetch(`https://swapi.dev/api/films/${filmId}/`),
- });
+ })
- if (status === "pending") return Loading...
;
+ if (status === 'pending') return Loading...
// this will not be necessary when v1 is released.
if (data == null) {
- console.info("this shouldn't happen but it does 2");
- return Loading...
;
+ console.info("this shouldn't happen but it does 2")
+ return Loading...
}
- if (status === "error") return Error :(
;
+ if (status === 'error') return Error :(
return (
{data.title}
@@ -26,23 +26,23 @@ function Film() {
Characters
{data.characters.map((character) => {
- const characterUrlParts = character.split("/").filter(Boolean);
- const characterId = characterUrlParts[characterUrlParts.length - 1];
- return
- );
+ )
}
function Character(props) {
- const { id } = props;
+ const { id } = props
const { data, status, error } = useQuery({
- queryKey: ["character", id],
+ queryKey: ['character', id],
queryFn: () => fetch(`https://swapi.dev/api/people/${props.id}/`),
- });
+ })
- if (status !== "success") {
- return null;
+ if (status !== 'success') {
+ return null
}
return (
@@ -51,7 +51,7 @@ function Character(props) {
{data.name}
- );
+ )
}
-export default Film;
+export default Film
diff --git a/examples/react/star-wars/src/Films.jsx b/examples/react/star-wars/src/Films.jsx
index 859772f851..19e13cc851 100644
--- a/examples/react/star-wars/src/Films.jsx
+++ b/examples/react/star-wars/src/Films.jsx
@@ -1,41 +1,41 @@
-import React from "react";
-import { Typography, Link } from "@mui/material";
-import { Link as RouterLink } from "react-router-dom";
-import { useQuery } from "@tanstack/react-query";
-import fetch from "./fetch";
+import React from 'react'
+import { Typography, Link } from '@mui/material'
+import { Link as RouterLink } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import fetch from './fetch'
export default function Films(props) {
const { data, status, error } = useQuery({
- queryKey: ["films"],
- queryFn: () => fetch("https://swapi.dev/api/films/"),
- });
+ queryKey: ['films'],
+ queryFn: () => fetch('https://swapi.dev/api/films/'),
+ })
- if (status === "pending") {
- return Loading...
;
+ if (status === 'pending') {
+ return Loading...
}
- if (status === "error") {
- return Error :(
;
+ if (status === 'error') {
+ return Error :(
}
return (
Films
{data.results.map((film) => {
- const filmUrlParts = film.url.split("/").filter(Boolean);
- const filmId = filmUrlParts[filmUrlParts.length - 1];
+ const filmUrlParts = film.url.split('/').filter(Boolean)
+ const filmId = filmUrlParts[filmUrlParts.length - 1]
return (
- {film.episode_id}. {film.title}{" "}
+ {film.episode_id}. {film.title}{' '}
({new Date(Date.parse(film.release_date)).getFullYear()})
- );
+ )
})}
- );
+ )
}
diff --git a/examples/react/star-wars/src/Home.jsx b/examples/react/star-wars/src/Home.jsx
index 27ac0a1678..d78810c4d3 100644
--- a/examples/react/star-wars/src/Home.jsx
+++ b/examples/react/star-wars/src/Home.jsx
@@ -1,11 +1,11 @@
-import React from "react";
-import { Typography } from "@mui/material";
-import { makeStyles } from "@mui/styles";
-import { Link } from "@mui/material";
-import { Link as RouterLink } from "react-router-dom";
+import React from 'react'
+import { Typography } from '@mui/material'
+import { makeStyles } from '@mui/styles'
+import { Link } from '@mui/material'
+import { Link as RouterLink } from 'react-router-dom'
export default function Home(props) {
- const classes = useStyles();
+ const classes = useStyles()
return (
@@ -27,16 +27,16 @@ export default function Home(props) {
tag them as observable.
- Simply associate a key with your fetch call and let{" "}
+ Simply associate a key with your fetch call and let{' '}
React Query handle the rest.
Ready to get started?
- Check out the{" "}
+ Check out the{' '}
- );
+ )
}
const useStyles = makeStyles((theme) => ({
main: {
- margin: "44px 0",
- "& p": {
- margin: "12px 0 24px",
+ margin: '44px 0',
+ '& p': {
+ margin: '12px 0 24px',
},
},
-}));
+}))
diff --git a/examples/react/star-wars/src/Layout.jsx b/examples/react/star-wars/src/Layout.jsx
index 603c4963c6..eeca6342dd 100644
--- a/examples/react/star-wars/src/Layout.jsx
+++ b/examples/react/star-wars/src/Layout.jsx
@@ -1,15 +1,15 @@
-import React from "react";
-import Films from "./Films";
-import Film from "./Film";
-import Characters from "./Characters";
-import Character from "./Character";
-import Home from "./Home";
-import { Link, Button } from "@mui/material";
-import { makeStyles } from "@mui/styles";
-import { Routes, Route, Link as RouterLink } from "react-router-dom";
+import React from 'react'
+import Films from './Films'
+import Film from './Film'
+import Characters from './Characters'
+import Character from './Character'
+import Home from './Home'
+import { Link, Button } from '@mui/material'
+import { makeStyles } from '@mui/styles'
+import { Routes, Route, Link as RouterLink } from 'react-router-dom'
export default function Layout(props) {
- const classes = useStyles();
+ const classes = useStyles()
return (
@@ -38,21 +38,21 @@ export default function Layout(props) {
- );
+ )
}
const useStyles = makeStyles((theme) => ({
main: {
- margin: "0 auto",
- padding: "16px",
+ margin: '0 auto',
+ padding: '16px',
},
menu: {
- margin: "0 auto",
- display: "flex",
- justifyContent: "center",
- backgroundColor: "#CCC",
- "& button": {
+ margin: '0 auto',
+ display: 'flex',
+ justifyContent: 'center',
+ backgroundColor: '#CCC',
+ '& button': {
margin: theme.spacing(1),
},
},
-}));
+}))
diff --git a/examples/react/star-wars/src/fetch.jsx b/examples/react/star-wars/src/fetch.jsx
index a34e54669d..6a1fe60ab5 100644
--- a/examples/react/star-wars/src/fetch.jsx
+++ b/examples/react/star-wars/src/fetch.jsx
@@ -1,4 +1,4 @@
export default async function (...args) {
- const res = await fetch(...args);
- return await res.json();
+ const res = await fetch(...args)
+ return await res.json()
}
diff --git a/examples/react/star-wars/src/index.jsx b/examples/react/star-wars/src/index.jsx
index bb0b9407de..03066f37fc 100644
--- a/examples/react/star-wars/src/index.jsx
+++ b/examples/react/star-wars/src/index.jsx
@@ -1,7 +1,7 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
+import React from 'react'
+import ReactDOM from 'react-dom/client'
-import App from "./App";
+import App from './App'
-const rootElement = document.getElementById("root");
-ReactDOM.createRoot(rootElement).render(
@@ -28,5 +28,5 @@ export default function Project({ activeProject, setActiveProject }) {
- );
+ )
}
diff --git a/examples/react/suspense/src/components/Projects.jsx b/examples/react/suspense/src/components/Projects.jsx
index 9988279309..fad6598aa8 100644
--- a/examples/react/suspense/src/components/Projects.jsx
+++ b/examples/react/suspense/src/components/Projects.jsx
@@ -1,17 +1,17 @@
-import React from "react";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import React from 'react'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
-import Button from "./Button";
-import Spinner from "./Spinner";
+import Button from './Button'
+import Spinner from './Spinner'
-import { fetchProjects, fetchProject } from "../queries";
+import { fetchProjects, fetchProject } from '../queries'
export default function Projects({ setActiveProject }) {
- const queryClient = useQueryClient();
+ const queryClient = useQueryClient()
const { data, isFetching } = useQuery({
- queryKey: ["projects"],
+ queryKey: ['projects'],
queryFn: fetchProjects,
- });
+ })
return (
@@ -22,17 +22,17 @@ export default function Projects({ setActiveProject }) {
onClick={() => {
// Prefetch the project query
queryClient.prefetchQuery({
- queryKey: ["project", project.name],
+ queryKey: ['project', project.name],
queryFn: () => fetchProject(project.name),
- });
- setActiveProject(project.name);
+ })
+ setActiveProject(project.name)
}}
>
Load
- {" "}
+ {' '}
{project.name}
))}
- );
+ )
}
diff --git a/examples/react/suspense/src/components/Spinner.jsx b/examples/react/suspense/src/components/Spinner.jsx
index f8d7ef9c08..c68cb061ab 100644
--- a/examples/react/suspense/src/components/Spinner.jsx
+++ b/examples/react/suspense/src/components/Spinner.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react'
export default function Spinner() {
return (
@@ -6,8 +6,8 @@ export default function Spinner() {
className="fa fa-circle-o-notch fa-spin"
style={{
marginLeft: 4,
- fontSize: "small",
+ fontSize: 'small',
}}
/>
- );
+ )
}
diff --git a/examples/react/suspense/src/index.jsx b/examples/react/suspense/src/index.jsx
index e1a71fc4ec..1b3622836b 100755
--- a/examples/react/suspense/src/index.jsx
+++ b/examples/react/suspense/src/index.jsx
@@ -1,20 +1,20 @@
-import React, { lazy } from "react";
-import ReactDOM from "react-dom/client";
+import React, { lazy } from 'react'
+import ReactDOM from 'react-dom/client'
import {
useQueryClient,
QueryClient,
QueryClientProvider,
QueryErrorResetBoundary,
-} from "@tanstack/react-query";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { ErrorBoundary } from "react-error-boundary";
+} from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { ErrorBoundary } from 'react-error-boundary'
-import { fetchProjects } from "./queries";
+import { fetchProjects } from './queries'
-import Button from "./components/Button";
+import Button from './components/Button'
-const Projects = lazy(() => import("./components/Projects"));
-const Project = lazy(() => import("./components/Project"));
+const Projects = lazy(() => import('./components/Projects'))
+const Project = lazy(() => import('./components/Project'))
const queryClient = new QueryClient({
defaultOptions: {
@@ -23,20 +23,20 @@ const queryClient = new QueryClient({
suspense: true,
},
},
-});
+})
function App() {
return (
- );
+ )
}
function Example() {
- const queryClient = useQueryClient();
- const [showProjects, setShowProjects] = React.useState(false);
- const [activeProject, setActiveProject] = React.useState(null);
+ const queryClient = useQueryClient()
+ const [showProjects, setShowProjects] = React.useState(false)
+ const [activeProject, setActiveProject] = React.useState(null)
return (
<>
@@ -45,15 +45,15 @@ function Example() {
setShowProjects((old) => {
if (!old) {
queryClient.prefetchQuery({
- queryKey: ["projects"],
+ queryKey: ['projects'],
queryFn: fetchProjects,
- });
+ })
}
- return !old;
- });
+ return !old
+ })
}}
>
- {showProjects ? "Hide Projects" : "Show Projects"}
+ {showProjects ? 'Hide Projects' : 'Show Projects'}
(
- There was an error!{" "}
+ There was an error!{' '}
resetErrorBoundary()}>Try again
-
{error.message}
+
{error.message}