Skip to content

Commit 8c40ea5

Browse files
boschniboschni
committed
docs: update examples
1 parent 495bed5 commit 8c40ea5

File tree

12 files changed

+37
-37
lines changed

12 files changed

+37
-37
lines changed

‎examples/auto-refetching/pages/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default function App() {
2525
}
2626

2727
function Example() {
28-
const queryClient = useQueryClient()
28+
const client = useQueryClient()
2929
const [intervalMs, setIntervalMs] = React.useState(1000)
3030
const [value, setValue] = React.useState('')
3131

@@ -44,12 +44,12 @@ function Example() {
4444
const [mutateAddTodo] = useMutation(
4545
value => fetch(`/api/data?add=${value}`),
4646
{
47-
onSuccess: () => queryClient.invalidateQueries('todos'),
47+
onSuccess: () => client.invalidateQueries('todos'),
4848
}
4949
)
5050

5151
const [mutateClear] = useMutation(value => fetch(`/api/data?clear=1`), {
52-
onSuccess: () => queryClient.invalidateQueries('todos'),
52+
onSuccess: () => client.invalidateQueries('todos'),
5353
})
5454

5555
if (status === 'loading') return <h1>Loading...</h1>

‎examples/basic-graphql-request/src/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ function usePosts() {
6363
}
6464

6565
function Posts({ setPostId }) {
66-
const queryClient = useQueryClient();
66+
const client = useQueryClient();
6767
const { status, data, error, isFetching } = usePosts();
6868

6969
return (
@@ -85,7 +85,7 @@ function Posts({ setPostId }) {
8585
style={
8686
// We can use the queryCache here to show bold links for
8787
// ones that are cached
88-
queryClient.getQueryData(["post", post.id])
88+
client.getQueryData(["post", post.id])
8989
? {
9090
fontWeight: "bold",
9191
color: "green",

‎examples/basic/src/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ function usePosts() {
4949
}
5050

5151
function Posts({ setPostId }) {
52-
const queryClient = useQueryClient();
52+
const client = useQueryClient();
5353
const { status, data, error, isFetching } = usePosts();
5454

5555
return (
@@ -71,7 +71,7 @@ function Posts({ setPostId }) {
7171
style={
7272
// We can use the queryCache here to show bold links for
7373
// ones that are cached
74-
queryClient.getQueryData(["post", post.id])
74+
client.getQueryData(["post", post.id])
7575
? {
7676
fontWeight: "bold",
7777
color: "green",

‎examples/custom-hooks/src/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ function App() {
3737
}
3838

3939
function Posts({ setPostId }) {
40-
const queryClient = useQueryClient();
40+
const client = useQueryClient();
4141
const { status, data, error, isFetching } = usePosts();
4242

4343
return (
@@ -59,7 +59,7 @@ function Posts({ setPostId }) {
5959
style={
6060
// We can use the queryCache here to show bold links for
6161
// ones that are cached
62-
queryClient.getQueryData(["post", post.id])
62+
client.getQueryData(["post", post.id])
6363
? {
6464
fontWeight: "bold",
6565
color: "green",

‎examples/default-query-function/src/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ function App() {
5757
}
5858

5959
function Posts({ setPostId }) {
60-
const queryClient = useQueryClient();
60+
const client = useQueryClient();
6161

6262
// All you have to do now is pass a key!
6363
const { status, data, error, isFetching } = useQuery("/posts");
@@ -81,7 +81,7 @@ function Posts({ setPostId }) {
8181
style={
8282
// We can use the queryCache here to show bold links for
8383
// ones that are cached
84-
queryClient.getQueryData(["post", post.id])
84+
client.getQueryData(["post", post.id])
8585
? {
8686
fontWeight: "bold",
8787
color: "green",

‎examples/focus-refetching/pages/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,19 +23,19 @@ export default function App() {
2323
}
2424

2525
function Example() {
26-
const queryClient = useQueryClient()
26+
const client = useQueryClient()
2727

2828
const { status, data, error } = useQuery('user', async () => {
2929
const { data } = await axios.get('/api/user')
3030
return data
3131
})
3232

3333
const [logoutMutation] = useMutation(logout, {
34-
onSuccess: () => queryClient.invalidateQueries('user'),
34+
onSuccess: () => client.invalidateQueries('user'),
3535
})
3636

3737
const [loginMutation] = useMutation(login, {
38-
onSuccess: () => queryClient.invalidateQueries('user'),
38+
onSuccess: () => client.invalidateQueries('user'),
3939
})
4040

4141
return (

‎examples/optimistic-updates/pages/index.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default function App() {
2323
}
2424

2525
function Example() {
26-
const queryClient = useQueryClient()
26+
const client = useQueryClient()
2727
const [text, setText] = React.useState('')
2828
const { status, data, error, isFetching } = useQuery('todos', async () => {
2929
const { data } = await axios.get('/api/data')
@@ -38,11 +38,11 @@ function Example() {
3838
// an error
3939
onMutate: text => {
4040
setText('')
41-
queryClient.cancelQueries('todos')
41+
client.cancelQueries('todos')
4242

43-
const previousValue = queryClient.getQueryData('todos')
43+
const previousValue = client.getQueryData('todos')
4444

45-
queryClient.setQueryData('todos', old => ({
45+
client.setQueryData('todos', old => ({
4646
...old,
4747
items: [...old.items, text],
4848
}))
@@ -51,10 +51,10 @@ function Example() {
5151
},
5252
// On failure, roll back to the previous value
5353
onError: (err, variables, previousValue) =>
54-
queryClient.setQueryData('todos', previousValue),
54+
client.setQueryData('todos', previousValue),
5555
// After success or failure, refetch the todos query
5656
onSettled: () => {
57-
queryClient.invalidateQueries('todos')
57+
client.invalidateQueries('todos')
5858
},
5959
}
6060
)

‎examples/pagination/pages/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default function App() {
2121
}
2222

2323
function Example() {
24-
const queryClient = useQueryClient()
24+
const client = useQueryClient()
2525
const [page, setPage] = React.useState(0)
2626

2727
const fetchProjects = React.useCallback(async (key, page = 0) => {
@@ -38,7 +38,7 @@ function Example() {
3838
// Prefetch the next page!
3939
React.useEffect(() => {
4040
if (data?.hasMore) {
41-
queryClient.prefetchQuery(['projects', page + 1], fetchProjects)
41+
client.prefetchQuery(['projects', page + 1], fetchProjects)
4242
}
4343
}, [data, fetchProjects, page])
4444

‎examples/playground/src/index.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -130,15 +130,15 @@ function Root() {
130130
}
131131

132132
function App() {
133-
const queryClient = useQueryClient();
133+
const client = useQueryClient();
134134
const [editingIndex, setEditingIndex] = React.useState(null);
135135
const [views, setViews] = React.useState(["", "fruit", "grape"]);
136136
// const [views, setViews] = React.useState([""]);
137137

138138
return (
139139
<div className="App">
140140
<div>
141-
<button onClick={() => queryClient.invalidateQueries(true)}>
141+
<button onClick={() => client.invalidateQueries(true)}>
142142
Force Refetch All
143143
</button>
144144
</div>
@@ -232,7 +232,7 @@ function Todos({ initialFilter = "", setEditingIndex }) {
232232
}
233233

234234
function EditTodo({ editingIndex, setEditingIndex }) {
235-
const queryClient = useQueryClient();
235+
const client = useQueryClient();
236236

237237
// Don't attempt to query until editingIndex is truthy
238238
const { status, data, isFetching, error, failureCount, refetch } = useQuery(
@@ -256,8 +256,8 @@ function EditTodo({ editingIndex, setEditingIndex }) {
256256
const [mutate, mutationState] = useMutation(patchTodo, {
257257
onSuccess: (data) => {
258258
// Update `todos` and the individual todo queries when this mutation succeeds
259-
queryClient.invalidateQueries("todos");
260-
queryClient.setQueryData(["todo", { id: editingIndex }], data);
259+
client.invalidateQueries("todos");
260+
client.setQueryData(["todo", { id: editingIndex }], data);
261261
},
262262
});
263263

@@ -335,12 +335,12 @@ function EditTodo({ editingIndex, setEditingIndex }) {
335335
}
336336

337337
function AddTodo() {
338-
const queryClient = useQueryClient();
338+
const client = useQueryClient();
339339
const [name, setName] = React.useState("");
340340

341341
const [mutate, { status, error }] = useMutation(postTodo, {
342342
onSuccess: () => {
343-
queryClient.invalidateQueries("todos");
343+
client.invalidateQueries("todos");
344344
},
345345
});
346346

‎examples/prefetching/pages/index.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export default function App() {
3535
}
3636

3737
function Example() {
38-
const queryClient = useQueryClient()
38+
const client = useQueryClient()
3939
const rerender = React.useReducer(d => d + 1)[1]
4040
const [selectedChar, setSelectedChar] = React.useState(1)
4141

@@ -48,10 +48,10 @@ function Example() {
4848

4949
const prefetchNext = async id => {
5050
await Promise.all([
51-
queryClient.prefetchQuery(['character', id + 1], getCharacter, {
51+
client.prefetchQuery(['character', id + 1], getCharacter, {
5252
staleTime: 5 * 60 * 1000,
5353
}),
54-
queryClient.prefetchQuery(['character', id - 1], getCharacter, {
54+
client.prefetchQuery(['character', id - 1], getCharacter, {
5555
staleTime: 5 * 60 * 1000,
5656
}),
5757
])
@@ -79,7 +79,7 @@ function Example() {
7979
>
8080
<div
8181
style={
82-
queryClient.getQueryData(['character', char.id])
82+
client.getQueryData(['character', char.id])
8383
? {
8484
fontWeight: 'bold',
8585
}

0 commit comments

Comments
 (0)