From f000af174d627a0cd19115c3e568310897efcdb0 Mon Sep 17 00:00:00 2001 From: Dominik Dorfmeister Date: Wed, 31 Mar 2021 22:20:39 +0200 Subject: [PATCH 1/2] chore: codesandbox auto builds (#2062) * chore: try out codesandbox auto builds * commit something to trigger deployments * chore: codesandbox auto builds set node to v14 because: [!] TypeError: inputSrcs.map(...).flat is not a function * chore: codesandbox auto builds use the root directory for publishing, because it contains the package.json * chore: codesandbox auto builds let's see if codesandbox picks up the basic example with a leading slash like shown in the docs * chore: codesandbox auto builds revert the test commit * chore: codesandbox auto builds add basic-typescript example * chore: codesandbox auto builds add basic-typescript example to codesandbox builds * chore: codesandbox auto builds no-use-before-define * chore: codesandbox auto builds don't use exact versions for examples, otherwise, we won't have the latest version when trying them out --- .codesandbox/ci.json | 5 + examples/basic-typescript/.babelrc | 4 + examples/basic-typescript/.eslintrc | 7 + examples/basic-typescript/.gitignore | 26 +++ examples/basic-typescript/.prettierrc | 1 + examples/basic-typescript/.rescriptsrc.js | 37 +++++ examples/basic-typescript/README.md | 6 + examples/basic-typescript/package.json | 40 +++++ examples/basic-typescript/public/favicon.ico | 1 + examples/basic-typescript/public/index.html | 38 +++++ .../basic-typescript/public/manifest.json | 15 ++ examples/basic-typescript/src/index.tsx | 153 ++++++++++++++++++ examples/basic-typescript/tsconfig.json | 26 +++ .../package.json | 2 +- 14 files changed, 360 insertions(+), 1 deletion(-) create mode 100644 .codesandbox/ci.json create mode 100644 examples/basic-typescript/.babelrc create mode 100644 examples/basic-typescript/.eslintrc create mode 100644 examples/basic-typescript/.gitignore create mode 100644 examples/basic-typescript/.prettierrc create mode 100644 examples/basic-typescript/.rescriptsrc.js create mode 100644 examples/basic-typescript/README.md create mode 100644 examples/basic-typescript/package.json create mode 100644 examples/basic-typescript/public/favicon.ico create mode 100644 examples/basic-typescript/public/index.html create mode 100644 examples/basic-typescript/public/manifest.json create mode 100644 examples/basic-typescript/src/index.tsx create mode 100644 examples/basic-typescript/tsconfig.json diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json new file mode 100644 index 0000000000..e9f693a51f --- /dev/null +++ b/.codesandbox/ci.json @@ -0,0 +1,5 @@ +{ + "packages": ["./"], + "sandboxes": ["/examples/basic", "/examples/basic-typescript"], + "node": "14" +} diff --git a/examples/basic-typescript/.babelrc b/examples/basic-typescript/.babelrc new file mode 100644 index 0000000000..141bbba800 --- /dev/null +++ b/examples/basic-typescript/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": ["react-app"], + "plugins": ["styled-components"] +} diff --git a/examples/basic-typescript/.eslintrc b/examples/basic-typescript/.eslintrc new file mode 100644 index 0000000000..404725ad66 --- /dev/null +++ b/examples/basic-typescript/.eslintrc @@ -0,0 +1,7 @@ +{ + "extends": ["react-app", "prettier"], + "rules": { + // "eqeqeq": 0, + // "jsx-a11y/anchor-is-valid": 0 + } +} diff --git a/examples/basic-typescript/.gitignore b/examples/basic-typescript/.gitignore new file mode 100644 index 0000000000..613b2de638 --- /dev/null +++ b/examples/basic-typescript/.gitignore @@ -0,0 +1,26 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +yarn.lock +package-lock.json + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/examples/basic-typescript/.prettierrc b/examples/basic-typescript/.prettierrc new file mode 100644 index 0000000000..0967ef424b --- /dev/null +++ b/examples/basic-typescript/.prettierrc @@ -0,0 +1 @@ +{} diff --git a/examples/basic-typescript/.rescriptsrc.js b/examples/basic-typescript/.rescriptsrc.js new file mode 100644 index 0000000000..433b258d85 --- /dev/null +++ b/examples/basic-typescript/.rescriptsrc.js @@ -0,0 +1,37 @@ +const path = require("path"); +const resolveFrom = require("resolve-from"); + +const fixLinkedDependencies = (config) => { + config.resolve = { + ...config.resolve, + alias: { + ...config.resolve.alias, + react$: resolveFrom(path.resolve("node_modules"), "react"), + "react-dom$": resolveFrom(path.resolve("node_modules"), "react-dom"), + }, + }; + return config; +}; + +const includeSrcDirectory = (config) => { + config.resolve = { + ...config.resolve, + modules: [path.resolve("src"), ...config.resolve.modules], + }; + return config; +}; + +const allowOutsideSrc = (config) => { + config.resolve.plugins = config.resolve.plugins.filter( + (p) => p.constructor.name !== "ModuleScopePlugin" + ); + return config; +}; + +module.exports = [ + ["use-babel-config", ".babelrc"], + ["use-eslint-config", ".eslintrc"], + fixLinkedDependencies, + allowOutsideSrc, + // includeSrcDirectory, +]; diff --git a/examples/basic-typescript/README.md b/examples/basic-typescript/README.md new file mode 100644 index 0000000000..b168d3c4b1 --- /dev/null +++ b/examples/basic-typescript/README.md @@ -0,0 +1,6 @@ +# Example + +To run this example: + +- `npm install` or `yarn` +- `npm run start` or `yarn start` diff --git a/examples/basic-typescript/package.json b/examples/basic-typescript/package.json new file mode 100644 index 0000000000..e96ae2d9bf --- /dev/null +++ b/examples/basic-typescript/package.json @@ -0,0 +1,40 @@ +{ + "private": true, + "scripts": { + "start": "rescripts start", + "build": "rescripts build", + "test": "rescripts test", + "eject": "rescripts eject" + }, + "dependencies": { + "axios": "^0.21.1", + "broadcast-channel": "^3.4.1", + "react": "^17.0.2", + "react-dom": "^17.0.2", + "react-query": "^3.13.3", + "react-scripts": "3.0.1", + "stop-runaway-react-effects": "^1.2.0", + "styled-components": "^4.3.2", + "typescript": "^4.2.3" + }, + "devDependencies": { + "@rescripts/cli": "^0.0.11", + "@rescripts/rescript-use-babel-config": "^0.0.8", + "@rescripts/rescript-use-eslint-config": "^0.0.9", + "@types/react": "^17.0.3", + "@types/react-dom": "^17.0.3", + "babel-eslint": "10.0.1" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/examples/basic-typescript/public/favicon.ico b/examples/basic-typescript/public/favicon.ico new file mode 100644 index 0000000000..30b3f0ffab --- /dev/null +++ b/examples/basic-typescript/public/favicon.ico @@ -0,0 +1 @@ +https://rawcdn.githack.com/tannerlinsley/react-query/master/examples/basic/public/favicon.ico \ No newline at end of file diff --git a/examples/basic-typescript/public/index.html b/examples/basic-typescript/public/index.html new file mode 100644 index 0000000000..dd1ccfd4cd --- /dev/null +++ b/examples/basic-typescript/public/index.html @@ -0,0 +1,38 @@ + + + + + + + + + + + React App + + + +
+ + + diff --git a/examples/basic-typescript/public/manifest.json b/examples/basic-typescript/public/manifest.json new file mode 100644 index 0000000000..1f2f141faf --- /dev/null +++ b/examples/basic-typescript/public/manifest.json @@ -0,0 +1,15 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/examples/basic-typescript/src/index.tsx b/examples/basic-typescript/src/index.tsx new file mode 100644 index 0000000000..1b4c8e9b29 --- /dev/null +++ b/examples/basic-typescript/src/index.tsx @@ -0,0 +1,153 @@ +/* eslint-disable jsx-a11y/anchor-is-valid */ +import * as React from "react"; +import ReactDOM from "react-dom"; +import axios from "axios"; +import { + useQuery, + useQueryClient, + QueryClient, + QueryClientProvider, +} from "react-query"; +import { ReactQueryDevtools } from "react-query/devtools"; + +const queryClient = new QueryClient(); + +type Post = { + id: number; + title: string; + body: string; +}; + +function usePosts() { + return useQuery( + "posts", + async (): Promise> => { + const { data } = await axios.get( + "https://jsonplaceholder.typicode.com/posts" + ); + return data; + } + ); +} + +function Posts({ + setPostId, +}: { + setPostId: React.Dispatch>; +}) { + const queryClient = useQueryClient(); + const { status, data, error, isFetching } = usePosts(); + + return ( +
+

Posts

+
+ {status === "loading" ? ( + "Loading..." + ) : error instanceof Error ? ( + Error: {error.message} + ) : ( + <> + +
{isFetching ? "Background Updating..." : " "}
+ + )} +
+
+ ); +} + +const getPostById = async (id: number): Promise => { + const { data } = await axios.get( + `https://jsonplaceholder.typicode.com/posts/${id}` + ); + return data; +}; + +function usePost(postId: number) { + return useQuery(["post", postId], () => getPostById(postId), { + enabled: !!postId, + }); +} + +function Post({ + postId, + setPostId, +}: { + postId: number; + setPostId: React.Dispatch>; +}) { + const { status, data, error, isFetching } = usePost(postId); + + return ( +
+ + {!postId || status === "loading" ? ( + "Loading..." + ) : error instanceof Error ? ( + Error: {error.message} + ) : ( + <> +

{data?.title}

+
+

{data?.body}

+
+
{isFetching ? "Background Updating..." : " "}
+ + )} +
+ ); +} + +function App() { + const [postId, setPostId] = React.useState(-1); + + return ( + +

+ As you visit the posts below, you will notice them in a loading state + the first time you load them. However, after you return to this list and + click on any posts you have already visited again, you will see them + load instantly and background refresh right before your eyes!{" "} + + (You may need to throttle your network speed to simulate longer + loading sequences) + +

+ {postId > -1 ? ( + + ) : ( + + )} + + + ); +} + +const rootElement = document.getElementById("root"); +ReactDOM.render(, rootElement); diff --git a/examples/basic-typescript/tsconfig.json b/examples/basic-typescript/tsconfig.json new file mode 100644 index 0000000000..7b1d3c6f51 --- /dev/null +++ b/examples/basic-typescript/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react" + }, + "include": [ + "src" + ] +} diff --git a/examples/optimistic-updates-typescript/package.json b/examples/optimistic-updates-typescript/package.json index 2b779d5af8..206da638a3 100755 --- a/examples/optimistic-updates-typescript/package.json +++ b/examples/optimistic-updates-typescript/package.json @@ -11,7 +11,7 @@ "next": "9.2.2", "react": "^17.0.1", "react-dom": "^17.0.1", - "react-query": "3.5.1", + "react-query": "^3.5.1", "typescript": "^4.1.2" }, "scripts": { From 7b14ef519a544d725f2cff99574f0a01f92b8c94 Mon Sep 17 00:00:00 2001 From: Dominik Dorfmeister Date: Fri, 2 Apr 2021 08:57:07 +0200 Subject: [PATCH 2/2] fix(useQuery): type of initialData now corresponds to the type returned by the query-fn (#2069) --- src/core/infiniteQueryObserver.ts | 2 +- src/core/types.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/core/infiniteQueryObserver.ts b/src/core/infiniteQueryObserver.ts index 1959435a09..dd9169644d 100644 --- a/src/core/infiniteQueryObserver.ts +++ b/src/core/infiniteQueryObserver.ts @@ -71,7 +71,7 @@ export class InfiniteQueryObserver< ): void { super.setOptions({ ...options, - behavior: infiniteQueryBehavior(), + behavior: infiniteQueryBehavior(), }) } diff --git a/src/core/types.ts b/src/core/types.ts index 09c80c332a..6d138bda30 100644 --- a/src/core/types.ts +++ b/src/core/types.ts @@ -90,7 +90,7 @@ export interface QueryObserverOptions< TData = TQueryFnData, TQueryData = TQueryFnData, TQueryKey extends QueryKey = QueryKey -> extends QueryOptions { +> extends QueryOptions { /** * Set this to `false` to disable automatic refetching when the query mounts or changes query keys. * To refetch the query, use the `refetch` method returned from the `useQuery` instance.