refactor: update react-query example to latest (#415)

Author: witherblock

examples/react-query/README.md

@@ -1,14 +1,14 @@
 ### The Graph Client / React Query
 
-This examples integrates The Graph Client with [React Query](https://react-query.tanstack.com/).
+This examples integrates The Graph Client with [React Query](https://tanstack.com/query/latest/).
 
 The example here is using the following tools/concepts:
 
 - The Graph Client CLI for generating artifacts
 - Client-side Compostion (more than 1 source)
 - Vite-based frontend project with TypeScript
 - GraphQL Codegen for type safe SDK
-- [React Query](https://react-query.tanstack.com/)
+- [React Query](https://tanstack.com/query/latest/)
 
 ### Getting Started
 
@@ -18,7 +18,7 @@ To run this example, make sure to install the dependencies in the root of the mo
 # In the root directory
 $ yarn install
 $ yarn build
-$ cd examples/urql/
+$ cd examples/react-query/
 $ yarn build-client
 $ yarn start
 ```

examples/react-query/package.json

@@ -10,10 +10,10 @@
     "graphiql": "graphclient serve-dev"
   },
   "dependencies": {
+    "@tanstack/react-query": "4.28.0",
     "graphql": "16.6.0",
     "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-query": "4.0.0"
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@graphprotocol/client-cli": "2.2.20",

examples/react-query/src/App.tsx

@@ -1,12 +1,12 @@
 import logo from './logo.svg'
 import './App.css'
 import { getBuiltGraphSDK } from '../.graphclient'
-import { useQuery } from 'react-query'
+import { useQuery } from '@tanstack/react-query'
 
 const sdk = getBuiltGraphSDK()
 
 function App() {
-  const result = useQuery('ExampleQuery', () => sdk.ExampleQuery())
+  const result = useQuery({ queryKey: ['ExampleQuery'], queryFn: () => sdk.ExampleQuery() })
 
   const { data, isLoading, error, refetch } = result
   return (
@@ -28,13 +28,13 @@ function App() {
               <textarea value={JSON.stringify(data, null, 2)} readOnly rows={25} />
             </form>
           )}
-          {error && (
+          {error ? (
             <form>
               <label>Error</label>
               <br />
               <textarea value={JSON.stringify(error, null, 2)} readOnly rows={25} />
             </form>
-          )}
+          ) : null}
         </fieldset>
       </header>
     </div>

examples/react-query/src/main.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom'
 import './index.css'
 import App from './App'
 import './App.css'
-import { QueryClient, QueryClientProvider } from 'react-query'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
 const queryClient = new QueryClient()
 

yarn.lock

@@ -2688,10 +2688,18 @@
   dependencies:
     tslib "^2.4.0"
 
-"@tanstack/query-core@^4.0.0-beta.1":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.0.0.tgz#76ee3707d237715b446044305fd5ae2bcc740b2c"
-  integrity sha512-EwapQGCC3TLK3ciedzcqXhlxQkGJ9GYe92ayxN+F+UCgQJWzpyp7Qez5bCTiSQLONM2Pg1Q6oDchpgd+ny2Wmg==
+"@tanstack/[email protected]":
+  version "4.27.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.27.0.tgz#96bcef499008ea080b66611d029655e3ffdf8bea"
+  integrity sha512-sm+QncWaPmM73IPwFlmWSKPqjdTXZeFf/7aEmWh00z7yl2FjqophPt0dE1EHW9P1giMC5rMviv7OUbSDmWzXXA==
+
+"@tanstack/[email protected]":
+  version "4.28.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.28.0.tgz#01cb9969b15cbcbd5dcfcd4b264dc18ef0a35f86"
+  integrity sha512-8cGBV5300RHlvYdS4ea+G1JcZIt5CIuprXYFnsWggkmGoC0b5JaqG0fIX3qwDL9PTNkKvG76NGThIWbpXivMrQ==
+  dependencies:
+    "@tanstack/query-core" "4.27.0"
+    use-sync-external-store "^1.2.0"
 
 "@tsconfig/node10@^1.0.7":
   version "1.0.8"
@@ -2880,11 +2888,6 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
   integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
 
-"@types/use-sync-external-store@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
-  integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
-
 "@types/ws@^8.0.0":
   version "8.5.0"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.0.tgz#805ceb3f68eaebbed1a3004a66f16e35b7f3bf14"
@@ -6956,15 +6959,6 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/react-native-path/-/react-native-path-0.0.5.tgz#a04e4b73a535a8a7cf15c6e760e27db7789afb13"
   integrity sha1-oE5Lc6U1qKfPFcbnYOJ9t3ia+xM=
 
-[email protected]:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/react-query/-/react-query-4.0.0.tgz#d8a5347503d0aedebc957e35b408c4aa3f726580"
-  integrity sha512-qiW+Yvbl+EK8iwPDJAj4qWAKceh+g8Up8jxoNxJbzhV3bNheeyHF3EyynnkDO3S+CYgSwtCUFaP8vOjB62j7xQ==
-  dependencies:
-    "@tanstack/query-core" "^4.0.0-beta.1"
-    "@types/use-sync-external-store" "^0.0.3"
-    use-sync-external-store "^1.2.0"
-
 react-refresh@^0.14.0:
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"