Skip to content

Commit 552eb05

Browse files
austin-cavanaghaustin-cavanagh
committed
created default query function to track query calls
1 parent 2a989d5 commit 552eb05

File tree

11 files changed

+38
-86
lines changed

11 files changed

+38
-86
lines changed

‎examples/example-2/client/src/client/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState } from 'react';
2-
import PostsOne from './components/PostsOne';
2+
import PostsOne from './components/postsOne';
33
import PostsTwo from './components/PostsTwo';
44
import PostsThree from './components/PostsThree';
55
// import ChromeComponent from './components/ChromeComponent';

‎examples/example-2/client/src/client/components/PostsOne.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -56,13 +56,11 @@ function PostsOne() {
5656
isLoading,
5757
error,
5858
} = useQuery<Post[]>({
59-
queryKey: [
60-
'posts-one',
61-
'http://localhost:3000/fetch-data?database=postsOne',
62-
],
63-
staleTime: Infinity, // Data will not become stale
59+
queryKey: ['posts-one'],
60+
meta: { url: 'http://localhost:3000/fetch-data?database=posts-one' },
6461
});
6562

63+
6664
// create-post route
6765
const createPostRoute = async (newPost: Post) => {
6866
try {
@@ -71,7 +69,7 @@ function PostsOne() {
7169
headers: {
7270
'Content-Type': 'application/json',
7371
},
74-
body: JSON.stringify({ database: 'postsOne', newPost: newPost }),
72+
body: JSON.stringify({ database: 'posts-one', newPost: newPost }),
7573
});
7674

7775
if (!response.ok) {
@@ -119,7 +117,7 @@ function PostsOne() {
119117
headers: {
120118
'Content-Type': 'application/json',
121119
},
122-
body: JSON.stringify({ database: 'postsOne', index: index }),
120+
body: JSON.stringify({ database: 'posts-one', index: index }),
123121
});
124122

125123
if (!response.ok) {
@@ -154,7 +152,7 @@ function PostsOne() {
154152
headers: {
155153
'Content-Type': 'application/json',
156154
},
157-
body: JSON.stringify({ database: 'postsOne', index: index }),
155+
body: JSON.stringify({ database: 'posts-one', index: index }),
158156
});
159157

160158
if (!response.ok) {
@@ -192,7 +190,7 @@ function PostsOne() {
192190
headers: {
193191
'Content-Type': 'application/json',
194192
},
195-
body: JSON.stringify({ database: 'postsOne', index, comment }),
193+
body: JSON.stringify({ database: 'posts-one', index, comment }),
196194
});
197195

198196
if (!response.ok) {
@@ -237,7 +235,7 @@ function PostsOne() {
237235
headers: {
238236
'Content-Type': 'application/json',
239237
},
240-
body: JSON.stringify({ database: 'postsOne', index: index }),
238+
body: JSON.stringify({ database: 'posts-one', index: index }),
241239
});
242240

243241
if (!response.ok) {

‎examples/example-2/client/src/client/components/PostsThree.tsx‎

Lines changed: 6 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -12,39 +12,14 @@ function PostsThree() {
1212
const { commentInputs, setCommentInputs, commentInputChange } =
1313
useCommentInputChange();
1414

15-
// fetch-data route to get starting posts
16-
const fetchPostsRoute = async () => {
17-
try {
18-
const database = 'postsThree';
19-
const response = await fetch(
20-
`http://localhost:3000/fetch-data?database=${database}`,
21-
{
22-
method: 'GET',
23-
headers: {
24-
'Content-Type': 'application/json',
25-
},
26-
}
27-
);
28-
if (!response.ok) {
29-
throw new Error('Server response was not ok');
30-
}
31-
32-
const newPostsArray = await response.json();
33-
34-
return newPostsArray;
35-
} catch (error) {
36-
console.error('Fetching posts failed:', error);
37-
}
38-
};
39-
4015
// query for fetching old posts
4116
const {
4217
data: postsArray,
4318
isLoading,
4419
error,
4520
} = useQuery<Post[]>({
4621
queryKey: ['posts-three'],
47-
queryFn: fetchPostsRoute,
22+
meta: { url: 'http://localhost:3000/fetch-data?database=posts-three' },
4823
});
4924

5025
// create-post route
@@ -55,7 +30,7 @@ function PostsThree() {
5530
headers: {
5631
'Content-Type': 'application/json',
5732
},
58-
body: JSON.stringify({ database: 'postsThree', newPost: newPost }),
33+
body: JSON.stringify({ database: 'posts-three', newPost: newPost }),
5934
});
6035

6136
if (!response.ok) {
@@ -103,7 +78,7 @@ function PostsThree() {
10378
headers: {
10479
'Content-Type': 'application/json',
10580
},
106-
body: JSON.stringify({ database: 'postsThree', index: index }),
81+
body: JSON.stringify({ database: 'posts-three', index: index }),
10782
});
10883

10984
if (!response.ok) {
@@ -138,7 +113,7 @@ function PostsThree() {
138113
headers: {
139114
'Content-Type': 'application/json',
140115
},
141-
body: JSON.stringify({ database: 'postsThree', index: index }),
116+
body: JSON.stringify({ database: 'posts-three', index: index }),
142117
});
143118

144119
if (!response.ok) {
@@ -176,7 +151,7 @@ function PostsThree() {
176151
headers: {
177152
'Content-Type': 'application/json',
178153
},
179-
body: JSON.stringify({ database: 'postsThree', index, comment }),
154+
body: JSON.stringify({ database: 'posts-three', index, comment }),
180155
});
181156

182157
if (!response.ok) {
@@ -221,7 +196,7 @@ function PostsThree() {
221196
headers: {
222197
'Content-Type': 'application/json',
223198
},
224-
body: JSON.stringify({ database: 'postsThree', index: index }),
199+
body: JSON.stringify({ database: 'posts-three', index: index }),
225200
});
226201

227202
if (!response.ok) {

‎examples/example-2/client/src/client/components/PostsTwo.tsx‎

Lines changed: 6 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -12,39 +12,14 @@ function PostsTwo() {
1212
const { commentInputs, setCommentInputs, commentInputChange } =
1313
useCommentInputChange();
1414

15-
// fetch-data route to get starting posts
16-
const fetchPostsRoute = async () => {
17-
try {
18-
const database = 'postsTwo';
19-
const response = await fetch(
20-
`http://localhost:3000/fetch-data?database=${database}`,
21-
{
22-
method: 'GET',
23-
headers: {
24-
'Content-Type': 'application/json',
25-
},
26-
}
27-
);
28-
if (!response.ok) {
29-
throw new Error('Server response was not ok');
30-
}
31-
32-
const newPostsArray = await response.json();
33-
34-
return newPostsArray;
35-
} catch (error) {
36-
console.error('Fetching posts failed:', error);
37-
}
38-
};
39-
4015
// query for fetching old posts
4116
const {
4217
data: postsArray,
4318
isLoading,
4419
error,
4520
} = useQuery<Post[]>({
4621
queryKey: ['posts-two'],
47-
queryFn: fetchPostsRoute,
22+
meta: { url: 'http://localhost:3000/fetch-data?database=posts-two' },
4823
});
4924

5025
// create-post route
@@ -55,7 +30,7 @@ function PostsTwo() {
5530
headers: {
5631
'Content-Type': 'application/json',
5732
},
58-
body: JSON.stringify({ database: 'postsTwo', newPost: newPost }),
33+
body: JSON.stringify({ database: 'posts-two', newPost: newPost }),
5934
});
6035

6136
if (!response.ok) {
@@ -103,7 +78,7 @@ function PostsTwo() {
10378
headers: {
10479
'Content-Type': 'application/json',
10580
},
106-
body: JSON.stringify({ database: 'postsTwo', index: index }),
81+
body: JSON.stringify({ database: 'posts-two', index: index }),
10782
});
10883

10984
if (!response.ok) {
@@ -138,7 +113,7 @@ function PostsTwo() {
138113
headers: {
139114
'Content-Type': 'application/json',
140115
},
141-
body: JSON.stringify({ database: 'postsTwo', index: index }),
116+
body: JSON.stringify({ database: 'posts-two', index: index }),
142117
});
143118

144119
if (!response.ok) {
@@ -176,7 +151,7 @@ function PostsTwo() {
176151
headers: {
177152
'Content-Type': 'application/json',
178153
},
179-
body: JSON.stringify({ database: 'postsTwo', index, comment }),
154+
body: JSON.stringify({ database: 'posts-two', index, comment }),
180155
});
181156

182157
if (!response.ok) {
@@ -221,7 +196,7 @@ function PostsTwo() {
221196
headers: {
222197
'Content-Type': 'application/json',
223198
},
224-
body: JSON.stringify({ database: 'postsTwo', index: index }),
199+
body: JSON.stringify({ database: 'posts-two', index: index }),
225200
});
226201

227202
if (!response.ok) {

‎examples/example-2/client/src/client/index.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,12 @@ import { QueryClient } from '@tanstack/react-query';
77
import './styles.css';
88

99
import ReactQueryRewind from './linked/ReactQueryRewind';
10-
import queryFunction from './linked/queryTracker';
10+
import queryTracker from './linked/queryTracker';
1111

1212
const queryClient = new QueryClient({
1313
defaultOptions: {
1414
queries: {
15-
// staleTime: 5 * (60 * 1000), // 5 mins
16-
gcTime: 10 * (60 * 1000), // 10 mins
17-
queryFn: queryFunction,
15+
queryFn: queryTracker,
1816
},
1917
},
2018
});

‎examples/example-2/client/src/client/linked/ReactQueryRewind.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { useEffect } from 'react';
22
import { useQueryClient, QueryCacheNotifyEvent } from '@tanstack/react-query';
33
import formatData from './formatData';
4-
// import queryTracker from './queryTracker';
54

65
const ReactQueryRewind = () => {
76
const queryClient = useQueryClient();

‎examples/example-2/client/src/client/linked/queryTracker.ts‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
1-
import { QueryFunctionContext } from '@tanstack/react-query';
1+
import { QueryFunctionContext, QueryKey } from '@tanstack/react-query';
22

3-
const queryTracker = async ({ queryKey }: QueryFunctionContext) => {
4-
const [queryKeyName, url] = queryKey as [string, string];
3+
const queryTracker = async ({
4+
queryKey,
5+
meta,
6+
}: QueryFunctionContext<QueryKey>) => {
7+
const url = meta?.url as string;
58

6-
const headers = {
7-
'Query-Key': queryKeyName,
8-
'Content-Type': 'application/json',
9-
};
9+
if (!url) {
10+
throw new Error(`URL not provided for query key: ${queryKey}`);
11+
}
1012

11-
const response = await fetch(url, { headers });
13+
const response = await fetch(url, {
14+
headers: {
15+
'Content-Type': 'application/json',
16+
'Query-Key': JSON.stringify(queryKey),
17+
},
18+
});
1219

1320
if (!response.ok) {
1421
throw new Error('Network response was not ok');

examples/example-2/server/models/postsOne copy.json renamed to examples/example-2/server/models/data.json

File renamed without changes.

examples/example-2/server/models/postsOne.json renamed to examples/example-2/server/models/posts-one.json

File renamed without changes.

examples/example-2/server/models/postsThree.json renamed to examples/example-2/server/models/posts-three.json

File renamed without changes.

0 commit comments

Comments
 (0)