diff --git a/examples/react-query/README.md b/examples/react-query/README.md index 377e5800..caf6390b 100644 --- a/examples/react-query/README.md +++ b/examples/react-query/README.md @@ -1,6 +1,6 @@ ### 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: @@ -8,7 +8,7 @@ The example here is using the following tools/concepts: - 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 ``` diff --git a/examples/react-query/package.json b/examples/react-query/package.json index fad15f43..7356c46a 100644 --- a/examples/react-query/package.json +++ b/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", diff --git a/examples/react-query/src/App.tsx b/examples/react-query/src/App.tsx index 94cbf6fe..70dcc177 100644 --- a/examples/react-query/src/App.tsx +++ b/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() { )} - {error && ( + {error ? (
- )} + ) : null} diff --git a/examples/react-query/src/main.tsx b/examples/react-query/src/main.tsx index 5f8b1cde..be953c8a 100644 --- a/examples/react-query/src/main.tsx +++ b/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() diff --git a/yarn.lock b/yarn.lock index 4aab6eff..37da53e5 100644 --- a/yarn.lock +++ b/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/query-core@4.27.0": + 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/react-query@4.28.0": + 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 @@ react-native-path@0.0.5: resolved "https://registry.yarnpkg.com/react-native-path/-/react-native-path-0.0.5.tgz#a04e4b73a535a8a7cf15c6e760e27db7789afb13" integrity sha1-oE5Lc6U1qKfPFcbnYOJ9t3ia+xM= -react-query@4.0.0: - 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"