Skip to content

Commit 3afc459

Browse files
ElenaBitireElenaBitire
authored
Merge pull request #284 from obytes/feat/update-react-query-kit
Feat/update react query kit
2 parents 83e5161 + febe36f commit 3afc459

File tree

9 files changed

+320
-144
lines changed

9 files changed

+320
-144
lines changed

‎.vscode/project.code-snippets‎

Lines changed: 47 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
],
4444
"description": "Component"
4545
},
46-
// https://snippet-generator.app/?description=useQuery+with+variables&tabtrigger=useqv&snippet=import+type+%7B+AxiosError+%7D+from+%27axios%27%3B%0Aimport+%7B+createQuery+%7D+from+%27react-query-kit%27%3B%0A%0Aimport+%7B+client+%7D+from+%27..%2Fcommon%27%3B%0A%0Atype+Variables+%3D+%7B%243%7D%3B%0Atype+Response+%3D%7B%244%7D%3B%0A%0Aexport+const+use%241+%3D+createQuery%3CResponse%2C+Variables%2C+AxiosError%3E%28%7B%0A++primaryKey%3A+%27%242%27%2C%0A++queryFn%3A+%28%7B+queryKey%3A+%5BprimaryKey%2C+variables%5D+%7D%29+%3D%3E+%7B%0A++++return+client%0A++++++.get%28%60%5C%24%7BprimaryKey%7D%2F%5C%24%7Bvariables.%24%7B5%7D%7D%60%29%0A++++++.then%28%28response%29+%3D%3E+response.data%29%3B%0A++%7D%2C%0A%7D%29%3B&mode=vscode
46+
// https://snippet-generator.app/?description=useQuery+with+variables&tabtrigger=useqv&snippet=import+type+%7B+AxiosError+%7D+from+%27axios%27%3B%0Aimport+%7B+createQuery+%7D+from+%27react-query-kit%27%3B%0A%0Aimport+%7B+client+%7D+from+%27..%2Fcommon%27%3B%0A%0Atype+Variables+%3D+%7B%243%7D%3B%0Atype+Response+%3D+%7B%244%7D%3B%0A%0Aexport+const+use%241+%3D+createQuery%3CResponse%2C+Variables%2C+AxiosError%3E%28%7B%0A++queryKey%3A+%5B%27%242%27%5D%2C+%0A++fetcher%3A+%28variables%29+%3D%3E+%7B%0A++++return+client%0A++++++.get%28%60%242%2F%5C%5C%24%7Bvariables.%24%7B5%7D%7D%60%29%22%2C%0A++++++.then%28%28response%29+%3D%3E+response.data%29%3B%0A++%7D%2C%0A%7D%29%3B%0A&mode=vscode
4747
"useQuery with variables": {
4848
"prefix": "useqv",
4949
"body": [
@@ -53,20 +53,21 @@
5353
"import { client } from '../common';",
5454
"",
5555
"type Variables = {$3};",
56-
"type Response ={$4};",
56+
"type Response = {$4};",
5757
"",
5858
"export const use$1 = createQuery<Response, Variables, AxiosError>({",
59-
" primaryKey: '$2',",
60-
" queryFn: ({ queryKey: [primaryKey, variables] }) => {",
59+
" queryKey: ['$2'], ",
60+
" fetcher: (variables) => {",
6161
" return client",
62-
" .get(`\\${primaryKey}/\\${variables.${5}}`)",
62+
" .get(`$2/\\${variables.${5}}`)",
6363
" .then((response) => response.data);",
6464
" },",
65-
"});"
65+
"});",
66+
""
6667
],
6768
"description": "useQuery with variables"
6869
},
69-
//https://snippet-generator.app/?description=useQuery&tabtrigger=useq&snippet=import+type+%7B+AxiosError+%7D+from+%27axios%27%3B%0Aimport+%7B+createQuery+%7D+from+%27react-query-kit%27%3B%0A%0Aimport+%7B+client+%7D+from+%27..%2Fcommon%27%3B%0A%0Atype+Response+%3D+%7B%243%7D%3B%0Atype+Variables+%3D+void%3B%0A%0Aexport+const+use%241+%3D+createQuery%3CResponse%2C+Variables%2C+AxiosError%3E%28%7B%0A++primaryKey%3A+%60%242%60%2C%0A++queryFn%3A+%28%7B+queryKey%3A+%5BprimaryKey%5D+%7D%29+%3D%3E+%7B%0A++++return+client.get%28%60%5C%24%7BprimaryKey%7D%60%29.then%28%28response%29+%3D%3E+response.data.posts%29%3B%0A++%7D%0A%7D%29%3B&mode=vscode
70+
//https://snippet-generator.app/?description=useQuery&tabtrigger=useq&snippet=import+type+%7B+AxiosError+%7D+from+%27axios%27%3B%0Aimport+%7B+createQuery+%7D+from+%27react-query-kit%27%3B%0A%0Aimport+%7B+client+%7D+from+%27..%2Fcommon%27%3B%0A%0Atype+Response+%3D+%7B%243%7D%3B%0Atype+Variables+%3D+void%3B%0A%0Aexport+const+use%241+%3D+createQuery%3CResponse%2C+Variables%2C+AxiosError%3E%28%7B%0A++queryKey%3A+%5B%27%242%27%5D%2C%0A++fetcher%3A+%28%29+%3D%3E+%7B%0A++++return+client.get%28%60%242%60%29.then%28%28response%29+%3D%3E+response.data.posts%29%3B%0A++%7D%2C%0A%7D%29%3B%0A&mode=vscode
7071
"useQuery": {
7172
"prefix": "useq",
7273
"body": [
@@ -79,14 +80,48 @@
7980
"type Variables = void;",
8081
"",
8182
"export const use$1 = createQuery<Response, Variables, AxiosError>({",
82-
" primaryKey: `$2`,",
83-
" queryFn: ({ queryKey: [primaryKey] }) => {",
84-
" return client.get(`\\${primaryKey}`).then((response) => response.data.posts);",
85-
" }",
86-
"});"
83+
" queryKey: ['$2'],",
84+
" fetcher: () => {",
85+
" return client.get(`$2`).then((response) => response.data.posts);",
86+
" },",
87+
"});",
88+
""
8789
],
8890
"description": "useQuery"
8991
},
92+
//https://snippet-generator.app/?description=useInfiniteQuery&tabtrigger=useiq&snippet=import+type+%7B+AxiosError+%7D+from+%27axios%27%3B%0Aimport+%7B+createInfiniteQuery+%7D+from+%27react-query-kit%27%3B%0A%0Aimport+%7B+client+%7D+from+%27..%2Fcommon%2Fclient%27%3B%0Aimport+%7B+DEFAULT_LIMIT%2C+getNextPageParam+%7D+from+%27..%2Fcommon%2Futils%27%3B%0Aimport+type+%7B+PaginateQuery+%7D+from+%27..%2Ftypes%27%3B%0A%0Atype+Response+%3D+void%3B%0Atype+Variables+%3D+PaginateQuery%3C%243%3E%3B%0A%0Aexport+const+use%241+%3D+createInfiniteQuery%3CResponse%2C+Variables%2C+AxiosError%3E%28%7B%0A++queryKey%3A+%5B%27%242%27%5D%2C%0A++fetcher%3A+%28_variables%3A+any%2C+%7B+pageParam+%7D%29%3A+Promise%3CResponse%3E+%3D%3E+%7B%0A++++return+client%28%7B%0A++++++url%3A+%60%2F%242%2F%60%2C%0A++++++method%3A+%27GET%27%2C%0A++++++params%3A+%7B%0A++++++++limit%3A+DEFAULT_LIMIT%2C%0A++++++++offset%3A+pageParam%2C%0A++++++%7D%2C%0A++++%7D%29.then%28%28response%29+%3D%3E+response.data%29%3B%0A++%7D%2C%0A++getNextPageParam%2C%0A++initialPageParam%3A+0%2C%0A%7D%29%3B&mode=vscode
93+
"useInfiniteQuery": {
94+
"prefix": "useiq",
95+
"body": [
96+
"import type { AxiosError } from 'axios';",
97+
"import { createInfiniteQuery } from 'react-query-kit';",
98+
"",
99+
"import { client } from '../common/client';",
100+
"import { DEFAULT_LIMIT, getNextPageParam } from '../common/utils';",
101+
"import type { PaginateQuery } from '../types';",
102+
"",
103+
"type Response = void;",
104+
"type Variables = PaginateQuery<$3>;",
105+
"",
106+
"export const use$1 = createInfiniteQuery<Response, Variables, AxiosError>({",
107+
" queryKey: ['$2'],",
108+
" fetcher: (_variables: any, { pageParam }): Promise<Response> => {",
109+
" return client({",
110+
" url: `/$2/`,",
111+
" method: 'GET',",
112+
" params: {",
113+
" limit: DEFAULT_LIMIT,",
114+
" offset: pageParam,",
115+
" },",
116+
" }).then((response) => response.data);",
117+
" },",
118+
" getNextPageParam,",
119+
" initialPageParam: 0,",
120+
"});"
121+
],
122+
"description": "useInfiniteQuery"
123+
},
124+
90125
//https://snippet-generator.app/?description=useMutation+&tabtrigger=usem&snippet=import+type+%7B+AxiosError+%7D+from+%27axios%27%3B%0Aimport+%7B+createMutation+%7D+from+%27react-query-kit%27%3B%0A%0Aimport+%7B+client+%7D+from+%27..%2Fcommon%27%3B%0A%0Atype+Variables+%3D+%7B%243%7D%3B%0Atype+Response+%3D+%7B%244%7D%3B%0A%0Aexport+const+use%241+%3D+createMutation%3CResponse%2C+Variables%2C+AxiosError%3E%28%0A++async+%28variables%29+%3D%3E%0A++++client%28%7B%0A++++++url%3A+%27%242%27%2C%0A++++++method%3A+%27POST%27%2C%0A++++++data%3A+variables%2C%0A++++%7D%29.then%28%28response%29+%3D%3E+response.data%29%0A%29%3B&mode=vscode
91126
"useMutation ": {
92127
"prefix": "usem",

‎docs/src/content/docs/guides/data-fetching.mdx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,11 +62,11 @@ Below is the complete code for the use-posts.ts file:
6262

6363
<CodeBlock file="src/api/posts/use-posts.ts" />
6464

65-
the `createQuery` function accept an object with the following: `queryKey`, `queryFn` and `options`. Read more about (createQuery)[https://github.com/liaoliao666/react-query-kit#createQuery]
65+
the `createQuery` function accept an object with the following: `queryKey`, `fetcher` and `options`. Since we migrated to the latest version of `react-query-kit`, the `queryFn` property is replaced with `fetcher` and the `queryKey` structure is simplified. Read more about (createQuery)[https://github.com/liaoliao666/react-query-kit#createQuery]
6666

6767
:::tip
6868
Use `useq` snippet to generate a query in no time using VSCode
69-
![use-query](https://github.com/obytes/react-native-template-obytes/assets/11137944/9acc189b-2425-491a-a644-02c51c6d405f)
69+
![use-query](https://github.com/obytes/react-native-template-obytes/assets/114411010/c052a0ee-8fba-436a-950f-a0c7e44cf3ae)
7070

7171
:::
7272

@@ -132,11 +132,19 @@ Maybe you mentioned that creating a new query or mutation hook looks the same ev
132132

133133
- `useq` : Create a new query hook
134134

135-
![use-query](https://github.com/obytes/react-native-template-obytes/assets/11137944/9acc189b-2425-491a-a644-02c51c6d405f)
135+
![use-query](https://github.com/obytes/react-native-template-obytes/assets/114411010/c052a0ee-8fba-436a-950f-a0c7e44cf3ae)
136136

137-
- `useqp` : Create a new query hook with params
137+
- `useqv` : Create a new query hook with variables
138138

139139
- `useiq` : Create a new infinite query hook
140140
- `usem` : Create a new mutation hook
141141

142142
![use-mutation](https://github.com/obytes/react-native-template-obytes/assets/11137944/c322f827-b71d-4629-a337-eb7cd96d4125)
143+
144+
## React Query dev tools plugin
145+
146+
For managing and and monitoring the `React Query` instances, we use the [React Query dev tools plugin](https://docs.expo.dev/debugging/devtools-plugins/#react-query), which offers us visibility into our data fetching processes and caching in real-time.
147+
It gives the ability to refetch the data manually, inspect and remove queries, providing control over our data.
148+
To use it, in the terminal press `shift` + `m` and choose from the opened list of dev tools the React Query plugin. The plugin's web interface will open and display the queries, enabling efficient debugging like in the example below:
149+
150+
![React Query plugin web interface](https://github.com/obytes/react-native-template-obytes/assets/114411010/26bc96ef-e6cb-49c3-be3c-006d6901e440)

‎package.json‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,10 @@
4747
"@tanstack/react-query": "^4.36.1",
4848
"app-icon-badge": "^0.0.15",
4949
"axios": "^1.6.5",
50-
"expo": "~50.0.11",
50+
"expo": "~50.0.13",
5151
"expo-build-properties": "~0.11.1",
5252
"expo-constants": "~15.4.5",
53-
"expo-dev-client": "~3.3.9",
53+
"expo-dev-client": "~3.3.10",
5454
"expo-font": "~11.10.3",
5555
"expo-image": "~1.10.6",
5656
"expo-linking": "~6.2.2",
@@ -79,12 +79,14 @@
7979
"react-native-screens": "~3.29.0",
8080
"react-native-svg": "14.1.0",
8181
"react-native-web": "~0.19.10",
82-
"react-query-kit": "^1.5.2",
82+
"react-query-kit": "^3.2.0",
8383
"tailwind-variants": "^0.1.20",
8484
"zod": "^3.22.4",
8585
"zustand": "^4.5.0"
8686
},
8787
"devDependencies": {
88+
"@dev-plugins/react-navigation": "^0.0.5",
89+
"@dev-plugins/react-query": "^0.0.5",
8890
"@babel/core": "^7.23.7",
8991
"@commitlint/cli": "^17.8.1",
9092
"@commitlint/config-conventional": "^17.8.1",
@@ -112,7 +114,7 @@
112114
"husky": "^8.0.3",
113115
"jest": "^29.7.0",
114116
"jest-environment-jsdom": "^29.7.0",
115-
"jest-expo": "~50.0.3",
117+
"jest-expo": "~50.0.4",
116118
"jest-junit": "^16.0.0",
117119
"lint-staged": "^13.3.0",
118120
"metro-babel-register": "^0.73.10",

0 commit comments

Comments
 (0)