: resolveFrom(path.resolve('node_modules'), 'react-dom'),\n },\n }\n return config\n}\n\nconst includeSrcDirectory = config =\u003E {\n config.resolve = {\n ...config.resolve,\n modules: [path.resolve('src'), ...config.resolve.modules],\n }\n return config\n}\n\nmodule.exports = [\n ['use-babel-config', '.babelrc'],\n ['use-eslint-config', '.eslintrc'],\n fixLinkedDependencies,\n \u002F\u002F includeSrcDirectory,\n]\n","directory_shortid":"l4k4lx7","id":"02977b6e-356e-4ea9-b37a-09eebc6bd513","inserted_at":"2022-05-08T07:54:08","is_binary":false,"sha":null,"shortid":"tkc6vom","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","title":".rescriptsrc.js","updated_at":"2022-05-08T07:54:08","upload_id":null},{"code":"\u003C!DOCTYPE html\u003E\n\u003Chtml lang=\"en\"\u003E\n \u003Chead\u003E\n \u003Cmeta charset=\"utf-8\" \u002F\u003E\n \u003Clink rel=\"shortcut icon\" href=\"%PUBLIC_URL%\u002Ffavicon.ico\" \u002F\u003E\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \u002F\u003E\n \u003Cmeta name=\"theme-color\" content=\"#000000\" \u002F\u003E\n \u003C!--\n manifest.json provides metadata used when your web app is installed on a\n user's mobile device or desktop. See https:\u002F\u002Fdevelopers.google.com\u002Fweb\u002Ffundamentals\u002Fweb-app-manifest\u002F\n --\u003E\n \u003Clink rel=\"manifest\" href=\"%PUBLIC_URL%\u002Fmanifest.json\" \u002F\u003E\n \u003C!--\n Notice the use of %PUBLIC_URL% in the tags above.\n It will be replaced with the URL of the `public` folder during the build.\n Only files inside the `public` folder can be referenced from the HTML.\n\n Unlike \"\u002Ffavicon.ico\" or \"favicon.ico\", \"%PUBLIC_URL%\u002Ffavicon.ico\" will\n work correctly both with client-side routing and a non-root public URL.\n Learn how to configure a non-root public URL by running `npm run build`.\n --\u003E\n \u003Ctitle\u003EReact App\u003C\u002Ftitle\u003E\n \u003C\u002Fhead\u003E\n \u003Cbody\u003E\n \u003Cnoscript\u003EYou need to enable JavaScript to run this app.\u003C\u002Fnoscript\u003E\n \u003Cdiv id=\"root\"\u003E\u003C\u002Fdiv\u003E\n \u003C!--\n This HTML file is a template.\n If you open it directly in the browser, you will see an empty page.\n\n You can add webfonts, meta tags, or analytics to this file.\n The build step will place the bundled scripts into the \u003Cbody\u003E tag.\n\n To begin the development, run `npm start` or `yarn start`.\n To create a production bundle, use `npm run build` or `yarn build`.\n --\u003E\n \u003C\u002Fbody\u003E\n\u003C\u002Fhtml\u003E\n","directory_shortid":"yfwbz9k","id":"30c3da68-1c8e-4b7e-b12b-458a97db2b63","inserted_at":"2022-05-08T07:54:08","is_binary":false,"sha":null,"shortid":"rt4b35q","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","title":"index.html","updated_at":"2022-05-08T07:54:08","upload_id":null},{"code":"const path = require(\"path\");\nconst resolveFrom = require(\"resolve-from\");\n\nconst fixLinkedDependencies = (config) =\u003E {\n config.resolve = {\n ...config.resolve,\n alias: {\n ...config.resolve.alias,\n react$: resolveFrom(path.resolve(\"node_modules\"), \"react\"),\n \"react-dom$\": resolveFrom(path.resolve(\"node_modules\"), \"react-dom\"),\n },\n };\n return config;\n};\n\nconst includeSrcDirectory = (config) =\u003E {\n config.resolve = {\n ...config.resolve,\n modules: [path.resolve(\"src\"), ...config.resolve.modules],\n };\n return config;\n};\n\nconst allowOutsideSrc = (config) =\u003E {\n config.resolve.plugins = config.resolve.plugins.filter(\n (p) =\u003E p.constructor.name !== \"ModuleScopePlugin\"\n );\n return config;\n};\n\nmodule.exports = [\n [\"use-babel-config\", \".babelrc\"],\n [\"use-eslint-config\", \".eslintrc\"],\n fixLinkedDependencies,\n allowOutsideSrc,\n \u002F\u002F includeSrcDirectory,\n];\n","directory_shortid":"e91ijbx","id":"6374443e-7faa-4e8e-bde6-ff1368b44887","inserted_at":"2022-05-08T07:54:08","is_binary":false,"sha":null,"shortid":"1gpc4kw","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","title":".rescriptsrc.js","updated_at":"2022-05-08T07:54:08","upload_id":null},{"code":"# See https:\u002F\u002Fhelp.github.com\u002Farticles\u002Fignoring-files\u002F for more about ignoring files.\n\n# dependencies\n\u002Fnode_modules\n\u002F.pnp\n.pnp.js\n\n# testing\n\u002Fcoverage\n\n# production\n\u002Fbuild\n\nyarn.lock\npackage-lock.json\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n","directory_shortid":null,"id":"936cf1a6-0156-4865-a4ac-6301e02d69b4","inserted_at":"2022-05-08T07:54:08","is_binary":false,"sha":null,"shortid":"vgf12bp","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","title":".gitignore","updated_at":"2022-05-08T07:54:08","upload_id":null},{"code":"# Example\n\nTo run this example:\n\n- `npm install` or `yarn`\n- `npm run start` or `yarn start`\n","directory_shortid":null,"id":"0f081124-fa38-48ec-b846-730f3878fa05","inserted_at":"2022-05-08T07:54:08","is_binary":false,"sha":null,"shortid":"5qgk2lm","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","title":"README.md","updated_at":"2022-05-08T07:54:08","upload_id":null},{"code":"https:\u002F\u002Frawcdn.githack.com\u002Ftannerlinsley\u002Freact-query\u002F5848fab8a560efcf66ef0062c207c3004bccad83\u002Fexamples\u002Fbasic\u002Fbasic-graphql-request\u002Fpublic\u002Ffavicon.ico","directory_shortid":"ijwyedi","id":"ffc320b5-2d15-485b-8043-836e1573be38","inserted_at":"2022-05-08T07:54:08","is_binary":true,"sha":null,"shortid":"jcdgukb","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","title":"favicon.ico","updated_at":"2022-05-08T07:54:08","upload_id":null},{"code":"{\n \"short_name\": \"React App\",\n \"name\": \"Create React App Sample\",\n \"icons\": [\n {\n \"src\": \"favicon.ico\",\n \"sizes\": \"64x64 32x32 24x24 16x16\",\n \"type\": \"image\u002Fx-icon\"\n }\n ],\n \"start_url\": \".\",\n \"display\": \"standalone\",\n \"theme_color\": \"#000000\",\n \"background_color\": \"#ffffff\"\n}\n","directory_shortid":"ijwyedi","id":"44697bcf-9d0f-4e39-b332-6babe6157d32","inserted_at":"2022-05-08T07:54:08","is_binary":false,"sha":null,"shortid":"zg3vz7c","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","title":"manifest.json","updated_at":"2022-05-08T07:54:08","upload_id":null},{"code":"{\n \"presets\": [\"react-app\"],\n \"plugins\": [\"styled-components\"]\n}\n","directory_shortid":"l4k4lx7","id":"26ddf71b-8e83-4153-b698-1d3bcabab03f","inserted_at":"2022-05-08T07:54:08","is_binary":false,"sha":null,"shortid":"hjx003f","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","title":".babelrc","updated_at":"2022-05-08T07:54:08","upload_id":null},{"code":"# See https:\u002F\u002Fhelp.github.com\u002Farticles\u002Fignoring-files\u002F for more about ignoring files.\n\n# dependencies\n\u002Fnode_modules\n\u002F.pnp\n.pnp.js\n\n# testing\n\u002Fcoverage\n\n# production\n\u002Fbuild\n\nyarn.lock\npackage-lock.json\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n","directory_shortid":"l4k4lx7","id":"48432444-5ab7-4545-a1e6-a73a3c112543","inserted_at":"2022-05-08T07:54:08","is_binary":false,"sha":null,"shortid":"ywr9rv9","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","title":".gitignore","updated_at":"2022-05-08T07:54:08","upload_id":null},{"code":"{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"esnext\"\n ],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"allowSyntheticDefaultImports\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"noEmit\": true,\n \"jsx\": \"react\"\n },\n \"include\": [\n \"src\"\n ]\n}\n","directory_shortid":"e91ijbx","id":"ab467df9-625d-47ee-94cf-b8419ecfb275","inserted_at":"2022-05-08T07:54:08","is_binary":false,"sha":null,"shortid":"fbrpcvn","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","title":"tsconfig.json","updated_at":"2022-05-08T07:54:08","upload_id":null},{"code":"\u003C!DOCTYPE html\u003E\n\u003Chtml lang=\"en\"\u003E\n \u003Chead\u003E\n \u003Cmeta charset=\"utf-8\" \u002F\u003E\n \u003Clink rel=\"shortcut icon\" href=\"%PUBLIC_URL%\u002Ffavicon.ico\" \u002F\u003E\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \u002F\u003E\n \u003Cmeta name=\"theme-color\" content=\"#000000\" \u002F\u003E\n \u003C!--\n manifest.json provides metadata used when your web app is installed on a\n user's mobile device or desktop. See https:\u002F\u002Fdevelopers.google.com\u002Fweb\u002Ffundamentals\u002Fweb-app-manifest\u002F\n --\u003E\n \u003Clink rel=\"manifest\" href=\"%PUBLIC_URL%\u002Fmanifest.json\" \u002F\u003E\n \u003C!--\n Notice the use of %PUBLIC_URL% in the tags above.\n It will be replaced with the URL of the `public` folder during the build.\n Only files inside the `public` folder can be referenced from the HTML.\n\n Unlike \"\u002Ffavicon.ico\" or \"favicon.ico\", \"%PUBLIC_URL%\u002Ffavicon.ico\" will\n work correctly both with client-side routing and a non-root public URL.\n Learn how to configure a non-root public URL by running `npm run build`.\n --\u003E\n \u003Ctitle\u003EReact App\u003C\u002Ftitle\u003E\n \u003C\u002Fhead\u003E\n \u003Cbody\u003E\n \u003Cnoscript\u003EYou need to enable JavaScript to run this app.\u003C\u002Fnoscript\u003E\n \u003Cdiv id=\"root\"\u003E\u003C\u002Fdiv\u003E\n \u003C!--\n This HTML file is a template.\n If you open it directly in the browser, you will see an empty page.\n\n You can add webfonts, meta tags, or analytics to this file.\n The build step will place the bundled scripts into the \u003Cbody\u003E tag.\n\n To begin the development, run `npm start` or `yarn start`.\n To create a production bundle, use `npm run build` or `yarn build`.\n --\u003E\n \u003C\u002Fbody\u003E\n\u003C\u002Fhtml\u003E\n","directory_shortid":"rg9d7jt","id":"25f5427c-03e9-4600-aba8-672a36158a3e","inserted_at":"2022-05-08T07:54:08","is_binary":false,"sha":null,"shortid":"4bi81v0","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","title":"index.html","updated_at":"2022-05-08T07:54:08","upload_id":null},{"code":"{\n \"extends\": [\"react-app\", \"prettier\"],\n \"rules\": {\n \u002F\u002F \"eqeqeq\": 0,\n \u002F\u002F \"jsx-a11y\u002Fanchor-is-valid\": 0\n }\n}\n","directory_shortid":null,"id":"ced30ed9-bee8-4996-9a45-bb43316fc17f","inserted_at":"2022-05-08T07:54:08","is_binary":false,"sha":null,"shortid":"8lp7d5t","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","title":".eslintrc","updated_at":"2022-05-08T07:54:08","upload_id":null},{"code":"# Example\n\nTo run this example:\n\n- `npm install` or `yarn`\n- `npm run start` or `yarn start`\n","directory_shortid":"e91ijbx","id":"c3d5e26c-2e28-45e7-9010-23b970304ac2","inserted_at":"2022-05-08T07:54:08","is_binary":false,"sha":null,"shortid":"lkkse0b","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","title":"README.md","updated_at":"2022-05-08T07:54:08","upload_id":null},{"code":"https:\u002F\u002Frawcdn.githack.com\u002Ftannerlinsley\u002Freact-query\u002F5848fab8a560efcf66ef0062c207c3004bccad83\u002Fexamples\u002Fbasic\u002Fpublic\u002Ffavicon.ico","directory_shortid":"yfwbz9k","id":"28e41449-c6d0-49da-8e90-85ce256fd5c1","inserted_at":"2022-05-08T07:54:08","is_binary":true,"sha":null,"shortid":"p0mw859","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","title":"favicon.ico","updated_at":"2022-05-08T07:54:08","upload_id":null},{"code":"https:\u002F\u002Frawcdn.githack.com\u002Ftannerlinsley\u002Freact-query\u002F5848fab8a560efcf66ef0062c207c3004bccad83\u002Fexamples\u002Fbasic\u002Fbasic-typescript\u002Fpublic\u002Ffavicon.ico","directory_shortid":"rg9d7jt","id":"6d83443e-44bf-42e3-878a-3266cd8c57f9","inserted_at":"2022-05-08T07:54:08","is_binary":true,"sha":null,"shortid":"t78v216","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","title":"favicon.ico","updated_at":"2022-05-08T07:54:08","upload_id":null},{"code":"{\n \"private\": true,\n \"scripts\": {\n \"start\": \"rescripts start\",\n \"build\": \"rescripts build\",\n \"test\": \"rescripts test\",\n \"eject\": \"rescripts eject\"\n },\n \"dependencies\": {\n \"axios\": \"^0.21.1\",\n \"broadcast-channel\": \"^3.4.1\",\n \"react\": \"^16.8.6\",\n \"react-dom\": \"^16.8.6\",\n \"react-query\": \"^3.5.0\",\n \"react-scripts\": \"3.0.1\",\n \"stop-runaway-react-effects\": \"^1.2.0\",\n \"styled-components\": \"^4.3.2\"\n },\n \"devDependencies\": {\n \"@rescripts\u002Fcli\": \"^0.0.11\",\n \"@rescripts\u002Frescript-use-babel-config\": \"^0.0.8\",\n \"@rescripts\u002Frescript-use-eslint-config\": \"^0.0.9\",\n \"babel-eslint\": \"10.0.1\"\n },\n \"browserslist\": {\n \"production\": [\n \"\u003E0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n","directory_shortid":null,"id":"acb03572-6d67-4891-936c-1404e927912c","inserted_at":"2022-05-08T07:54:08","is_binary":false,"sha":null,"shortid":"o37rzvn","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","title":"package.json","updated_at":"2022-05-08T07:54:08","upload_id":null},{"code":"{\n \"short_name\": \"React App\",\n \"name\": \"Create React App Sample\",\n \"icons\": [\n {\n \"src\": \"favicon.ico\",\n \"sizes\": \"64x64 32x32 24x24 16x16\",\n \"type\": \"image\u002Fx-icon\"\n }\n ],\n \"start_url\": \".\",\n \"display\": \"standalone\",\n \"theme_color\": \"#000000\",\n \"background_color\": \"#ffffff\"\n}\n","directory_shortid":"yfwbz9k","id":"92c36fb8-b5c1-48c7-8e8c-dfddc397bab5","inserted_at":"2022-05-08T07:54:08","is_binary":false,"sha":null,"shortid":"tbqh7rz","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","title":"manifest.json","updated_at":"2022-05-08T07:54:08","upload_id":null},{"code":"\u002F* eslint-disable jsx-a11y\u002Fanchor-is-valid *\u002F\nimport * as React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport axios from \"axios\";\nimport {\n useQuery,\n useQueryClient,\n QueryClient,\n QueryClientProvider,\n} from \"react-query\";\nimport { ReactQueryDevtools } from \"react-query\u002Fdevtools\";\n\nconst queryClient = new QueryClient();\n\ntype Post = {\n id: number;\n title: string;\n body: string;\n};\n\nfunction usePosts() {\n return useQuery(\n \"posts\",\n async (): Promise\u003CArray\u003CPost\u003E\u003E =\u003E {\n const { data } = await axios.get(\n \"https:\u002F\u002Fjsonplaceholder.typicode.com\u002Fposts\"\n );\n return data;\n }\n );\n}\n\nfunction Posts({\n setPostId,\n}: {\n setPostId: React.Dispatch\u003CReact.SetStateAction\u003Cnumber\u003E\u003E;\n}) {\n const queryClient = useQueryClient();\n const { status, data, error, isFetching } = usePosts();\n\n return (\n \u003Cdiv\u003E\n \u003Ch1\u003EPosts\u003C\u002Fh1\u003E\n \u003Cdiv\u003E\n {status === \"loading\" ? (\n \"Loading...\"\n ) : error instanceof Error ? (\n \u003Cspan\u003EError: {error.message}\u003C\u002Fspan\u003E\n ) : (\n \u003C\u003E\n \u003Cdiv\u003E\n {data?.map((post) =\u003E (\n \u003Cp key={post.id}\u003E\n \u003Ca\n onClick={() =\u003E setPostId(post.id)}\n href=\"#\"\n style={\n \u002F\u002F We can access the query data here to show bold links for\n \u002F\u002F ones that are cached\n queryClient.getQueryData([\"post\", post.id])\n ? {\n fontWeight: \"bold\",\n color: \"green\",\n }\n : {}\n }\n \u003E\n {post.title}\n \u003C\u002Fa\u003E\n \u003C\u002Fp\u003E\n ))}\n \u003C\u002Fdiv\u003E\n \u003Cdiv\u003E{isFetching ? \"Background Updating...\" : \" \"}\u003C\u002Fdiv\u003E\n \u003C\u002F\u003E\n )}\n \u003C\u002Fdiv\u003E\n \u003C\u002Fdiv\u003E\n );\n}\n\nconst getPostById = async (id: number): Promise\u003CPost\u003E =\u003E {\n const { data } = await axios.get(\n `https:\u002F\u002Fjsonplaceholder.typicode.com\u002Fposts\u002F${id}`\n );\n return data;\n};\n\nfunction usePost(postId: number) {\n return useQuery([\"post\", postId], () =\u003E getPostById(postId), {\n enabled: !!postId,\n });\n}\n\nfunction Post({\n postId,\n setPostId,\n}: {\n postId: number;\n setPostId: React.Dispatch\u003CReact.SetStateAction\u003Cnumber\u003E\u003E;\n}) {\n const { status, data, error, isFetching } = usePost(postId);\n\n return (\n \u003Cdiv\u003E\n \u003Cdiv\u003E\n \u003Ca onClick={() =\u003E setPostId(-1)} href=\"#\"\u003E\n Back\n \u003C\u002Fa\u003E\n \u003C\u002Fdiv\u003E\n {!postId || status === \"loading\" ? (\n \"Loading...\"\n ) : error instanceof Error ? (\n \u003Cspan\u003EError: {error.message}\u003C\u002Fspan\u003E\n ) : (\n \u003C\u003E\n \u003Ch1\u003E{data?.title}\u003C\u002Fh1\u003E\n \u003Cdiv\u003E\n \u003Cp\u003E{data?.body}\u003C\u002Fp\u003E\n \u003C\u002Fdiv\u003E\n \u003Cdiv\u003E{isFetching ? \"Background Updating...\" : \" \"}\u003C\u002Fdiv\u003E\n \u003C\u002F\u003E\n )}\n \u003C\u002Fdiv\u003E\n );\n}\n\nfunction App() {\n const [postId, setPostId] = React.useState(-1);\n\n return (\n \u003CQueryClientProvider client={queryClient}\u003E\n \u003Cp\u003E\n As you visit the posts below, you will notice them in a loading state\n the first time you load them. However, after you return to this list and\n click on any posts you have already visited again, you will see them\n load instantly and background refresh right before your eyes!{\" \"}\n \u003Cstrong\u003E\n (You may need to throttle your network speed to simulate longer\n loading sequences)\n \u003C\u002Fstrong\u003E\n \u003C\u002Fp\u003E\n {postId \u003E -1 ? (\n \u003CPost postId={postId} setPostId={setPostId} \u002F\u003E\n ) : (\n \u003CPosts setPostId={setPostId} \u002F\u003E\n )}\n \u003CReactQueryDevtools initialIsOpen \u002F\u003E\n \u003C\u002FQueryClientProvider\u003E\n );\n}\n\nconst rootElement = document.getElementById(\"root\");\nReactDOM.render(\u003CApp \u002F\u003E, rootElement);\n","directory_shortid":"uxi4xls","id":"446c8803-cd08-4ae1-9fcb-7756f86e0ae5","inserted_at":"2022-05-08T07:54:08","is_binary":false,"sha":null,"shortid":"vldwovp","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","title":"index.tsx","updated_at":"2022-05-08T07:54:08","upload_id":null},{"code":"{\n \"private\": true,\n \"scripts\": {\n \"start\": \"rescripts start\",\n \"build\": \"rescripts build\",\n \"test\": \"rescripts test\",\n \"eject\": \"rescripts eject\"\n },\n \"dependencies\": {\n \"axios\": \"^0.21.1\",\n \"broadcast-channel\": \"^3.4.1\",\n \"react\": \"^17.0.2\",\n \"react-dom\": \"^17.0.2\",\n \"react-query\": \"^3.13.3\",\n \"react-scripts\": \"3.0.1\",\n \"stop-runaway-react-effects\": \"^1.2.0\",\n \"styled-components\": \"^4.3.2\",\n \"typescript\": \"^4.2.3\"\n },\n \"devDependencies\": {\n \"@rescripts\u002Fcli\": \"^0.0.11\",\n \"@rescripts\u002Frescript-use-babel-config\": \"^0.0.8\",\n \"@rescripts\u002Frescript-use-eslint-config\": \"^0.0.9\",\n \"@types\u002Freact\": \"^17.0.3\",\n \"@types\u002Freact-dom\": \"^17.0.3\",\n \"babel-eslint\": \"10.0.1\",\n \"eslint-config-prettier\": \"^8.3.0\"\n },\n \"browserslist\": {\n \"production\": [\n \"\u003E0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n","directory_shortid":"e91ijbx","id":"f3277ff8-661a-421f-86d6-1884fd42a918","inserted_at":"2022-05-08T07:54:08","is_binary":false,"sha":null,"shortid":"qomhx0e","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","title":"package.json","updated_at":"2022-05-08T07:54:08","upload_id":null},{"code":"{\n \"presets\": [\"react-app\"],\n \"plugins\": [\"styled-components\"]\n}\n","directory_shortid":"e91ijbx","id":"24f0a1e7-1c5a-41e8-93f0-2e5ad31072d4","inserted_at":"2022-05-08T07:54:08","is_binary":false,"sha":null,"shortid":"wiz12hy","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","title":".babelrc","updated_at":"2022-05-08T07:54:08","upload_id":null},{"code":"{\n \"extends\": [\"react-app\", \"prettier\"],\n \"rules\": {\n \u002F\u002F \"eqeqeq\": 0,\n \u002F\u002F \"jsx-a11y\u002Fanchor-is-valid\": 0\n }\n}\n","directory_shortid":"l4k4lx7","id":"0ecf55da-0b10-4941-b4dd-a6d19faf3f5a","inserted_at":"2022-05-08T07:54:08","is_binary":false,"sha":null,"shortid":"16pg8j9","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","title":".eslintrc","updated_at":"2022-05-08T07:54:08","upload_id":null},{"code":"const path = require(\"path\");\nconst resolveFrom = require(\"resolve-from\");\n\nconst fixLinkedDependencies = (config) =\u003E {\n config.resolve = {\n ...config.resolve,\n alias: {\n ...config.resolve.alias,\n react$: resolveFrom(path.resolve(\"node_modules\"), \"react\"),\n \"react-dom$\": resolveFrom(path.resolve(\"node_modules\"), \"react-dom\"),\n },\n };\n return config;\n};\n\nconst includeSrcDirectory = (config) =\u003E {\n config.resolve = {\n ...config.resolve,\n modules: [path.resolve(\"src\"), ...config.resolve.modules],\n };\n return config;\n};\n\nconst allowOutsideSrc = (config) =\u003E {\n config.resolve.plugins = config.resolve.plugins.filter(\n (p) =\u003E p.constructor.name !== \"ModuleScopePlugin\"\n );\n return config;\n};\n\nmodule.exports = [\n [\"use-babel-config\", \".babelrc\"],\n [\"use-eslint-config\", \".eslintrc\"],\n fixLinkedDependencies,\n allowOutsideSrc,\n \u002F\u002F includeSrcDirectory,\n];\n","directory_shortid":null,"id":"639730b4-45ed-45e6-bd0a-5df0d5362a02","inserted_at":"2022-05-08T07:54:08","is_binary":false,"sha":null,"shortid":"gtmj7d9","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","title":".rescriptsrc.js","updated_at":"2022-05-08T07:54:08","upload_id":null},{"code":"\u002F* eslint-disable jsx-a11y\u002Fanchor-is-valid *\u002F\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport axios from \"axios\";\nimport {\n useQuery,\n useQueryClient,\n QueryClient,\n QueryClientProvider,\n} from \"react-query\";\nimport { ReactQueryDevtools } from \"react-query\u002Fdevtools\";\n\nconst queryClient = new QueryClient();\n\nfunction App() {\n const [postId, setPostId] = React.useState(-1);\n\n return (\n \u003CQueryClientProvider client={queryClient}\u003E\n \u003Cp\u003E\n As you visit the posts below, you will notice them in a loading state\n the first time you load them. However, after you return to this list and\n click on any posts you have already visited again, you will see them\n load instantly and background refresh right before your eyes!{\" \"}\n \u003Cstrong\u003E\n (You may need to throttle your network speed to simulate longer\n loading sequences)\n \u003C\u002Fstrong\u003E\n \u003C\u002Fp\u003E\n {postId \u003E -1 ? (\n \u003CPost postId={postId} setPostId={setPostId} \u002F\u003E\n ) : (\n \u003CPosts setPostId={setPostId} \u002F\u003E\n )}\n \u003CReactQueryDevtools initialIsOpen \u002F\u003E\n \u003C\u002FQueryClientProvider\u003E\n );\n}\n\nfunction usePosts() {\n return useQuery(\"posts\", async () =\u003E {\n const { data } = await axios.get(\n \"https:\u002F\u002Fjsonplaceholder.typicode.com\u002Fposts\"\n );\n return data;\n });\n}\n\nfunction Posts({ setPostId }) {\n const queryClient = useQueryClient();\n const { status, data, error, isFetching } = usePosts();\n\n return (\n \u003Cdiv\u003E\n \u003Ch1\u003EPosts\u003C\u002Fh1\u003E\n \u003Cdiv\u003E\n {status === \"loading\" ? (\n \"Loading...\"\n ) : status === \"error\" ? (\n \u003Cspan\u003EError: {error.message}\u003C\u002Fspan\u003E\n ) : (\n \u003C\u003E\n \u003Cdiv\u003E\n {data.map((post) =\u003E (\n \u003Cp key={post.id}\u003E\n \u003Ca\n onClick={() =\u003E setPostId(post.id)}\n href=\"#\"\n style={\n \u002F\u002F We can access the query data here to show bold links for\n \u002F\u002F ones that are cached\n queryClient.getQueryData([\"post\", post.id])\n ? {\n fontWeight: \"bold\",\n color: \"green\",\n }\n : {}\n }\n \u003E\n {post.title}\n \u003C\u002Fa\u003E\n \u003C\u002Fp\u003E\n ))}\n \u003C\u002Fdiv\u003E\n \u003Cdiv\u003E{isFetching ? \"Background Updating...\" : \" \"}\u003C\u002Fdiv\u003E\n \u003C\u002F\u003E\n )}\n \u003C\u002Fdiv\u003E\n \u003C\u002Fdiv\u003E\n );\n}\n\nconst getPostById = async (id) =\u003E {\n const { data } = await axios.get(\n `https:\u002F\u002Fjsonplaceholder.typicode.com\u002Fposts\u002F${id}`\n );\n return data;\n};\n\nfunction usePost(postId) {\n return useQuery([\"post\", postId], () =\u003E getPostById(postId), {\n enabled: !!postId,\n });\n}\n\nfunction Post({ postId, setPostId }) {\n const { status, data, error, isFetching } = usePost(postId);\n\n return (\n \u003Cdiv\u003E\n \u003Cdiv\u003E\n \u003Ca onClick={() =\u003E setPostId(-1)} href=\"#\"\u003E\n Back\n \u003C\u002Fa\u003E\n \u003C\u002Fdiv\u003E\n {!postId || status === \"loading\" ? (\n \"Loading...\"\n ) : status === \"error\" ? (\n \u003Cspan\u003EError: {error.message}\u003C\u002Fspan\u003E\n ) : (\n \u003C\u003E\n \u003Ch1\u003E{data.title}\u003C\u002Fh1\u003E\n \u003Cdiv\u003E\n \u003Cp\u003E{data.body}\u003C\u002Fp\u003E\n \u003C\u002Fdiv\u003E\n \u003Cdiv\u003E{isFetching ? \"Background Updating...\" : \" \"}\u003C\u002Fdiv\u003E\n \u003C\u002F\u003E\n )}\n \u003C\u002Fdiv\u003E\n );\n}\n\nconst rootElement = document.getElementById(\"root\");\nReactDOM.render(\u003CApp \u002F\u003E, rootElement);\n","directory_shortid":"22u3jgd","id":"f3b926eb-ccef-4924-80c0-eb5753365e02","inserted_at":"2022-05-08T07:54:08","is_binary":false,"sha":null,"shortid":"zmko00r","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","title":"index.js","updated_at":"2022-05-08T07:54:08","upload_id":null},{"code":"{\n \"presets\": [\"react-app\"],\n \"plugins\": [\"styled-components\"]\n}\n","directory_shortid":null,"id":"913c4f25-010d-4116-ac09-9af7c436056f","inserted_at":"2022-05-08T07:54:08","is_binary":false,"sha":null,"shortid":"v176ivl","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","title":".babelrc","updated_at":"2022-05-08T07:54:08","upload_id":null},{"code":"{}\n","directory_shortid":"l4k4lx7","id":"45dd3584-6147-4dc3-976b-6694e4fe3d72","inserted_at":"2022-05-08T07:54:08","is_binary":false,"sha":null,"shortid":"ez115qt","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","title":".prettierrc","updated_at":"2022-05-08T07:54:08","upload_id":null},{"code":"{}\n","directory_shortid":"e91ijbx","id":"15eae27e-fc1b-46ea-9d87-8b7c9e3b768e","inserted_at":"2022-05-08T07:54:08","is_binary":false,"sha":null,"shortid":"qb6c7yp","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","title":".prettierrc","updated_at":"2022-05-08T07:54:08","upload_id":null},{"code":"\u002F* eslint-disable jsx-a11y\u002Fanchor-is-valid *\u002F\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport {\n useQuery,\n useQueryClient,\n QueryClient,\n QueryClientProvider,\n} from \"react-query\";\nimport { ReactQueryDevtools } from \"react-query\u002Fdevtools\";\nimport { request, gql } from \"graphql-request\";\n\nconst endpoint = \"https:\u002F\u002Fgraphqlzero.almansi.me\u002Fapi\";\n\nconst queryClient = new QueryClient();\n\nfunction App() {\n const [postId, setPostId] = React.useState(-1);\n\n return (\n \u003CQueryClientProvider client={queryClient}\u003E\n \u003Cp\u003E\n As you visit the posts below, you will notice them in a loading state\n the first time you load them. However, after you return to this list and\n click on any posts you have already visited again, you will see them\n load instantly and background refresh right before your eyes!{\" \"}\n \u003Cstrong\u003E\n (You may need to throttle your network speed to simulate longer\n loading sequences)\n \u003C\u002Fstrong\u003E\n \u003C\u002Fp\u003E\n {postId \u003E -1 ? (\n \u003CPost postId={postId} setPostId={setPostId} \u002F\u003E\n ) : (\n \u003CPosts setPostId={setPostId} \u002F\u003E\n )}\n \u003CReactQueryDevtools initialIsOpen \u002F\u003E\n \u003C\u002FQueryClientProvider\u003E\n );\n}\n\nfunction usePosts() {\n return useQuery(\"posts\", async () =\u003E {\n const {\n posts: { data },\n } = await request(\n endpoint,\n gql`\n query {\n posts {\n data {\n id\n title\n }\n }\n }\n `\n );\n return data;\n });\n}\n\nfunction Posts({ setPostId }) {\n const queryClient = useQueryClient();\n const { status, data, error, isFetching } = usePosts();\n\n return (\n \u003Cdiv\u003E\n \u003Ch1\u003EPosts\u003C\u002Fh1\u003E\n \u003Cdiv\u003E\n {status === \"loading\" ? (\n \"Loading...\"\n ) : status === \"error\" ? (\n \u003Cspan\u003EError: {error.message}\u003C\u002Fspan\u003E\n ) : (\n \u003C\u003E\n \u003Cdiv\u003E\n {data.map((post) =\u003E (\n \u003Cp key={post.id}\u003E\n \u003Ca\n onClick={() =\u003E setPostId(post.id)}\n href=\"#\"\n style={\n \u002F\u002F We can find the existing query data here to show bold links for\n \u002F\u002F ones that are cached\n queryClient.getQueryData([\"post\", post.id])\n ? {\n fontWeight: \"bold\",\n color: \"green\",\n }\n : {}\n }\n \u003E\n {post.title}\n \u003C\u002Fa\u003E\n \u003C\u002Fp\u003E\n ))}\n \u003C\u002Fdiv\u003E\n \u003Cdiv\u003E{isFetching ? \"Background Updating...\" : \" \"}\u003C\u002Fdiv\u003E\n \u003C\u002F\u003E\n )}\n \u003C\u002Fdiv\u003E\n \u003C\u002Fdiv\u003E\n );\n}\n\nfunction usePost(postId) {\n return useQuery(\n [\"post\", postId],\n async () =\u003E {\n const { post } = await request(\n endpoint,\n gql`\n query {\n post(id: ${postId}) {\n id\n title\n body\n }\n }\n `\n );\n\n return post;\n },\n {\n enabled: !!postId,\n }\n );\n}\n\nfunction Post({ postId, setPostId }) {\n const { status, data, error, isFetching } = usePost(postId);\n\n return (\n \u003Cdiv\u003E\n \u003Cdiv\u003E\n \u003Ca onClick={() =\u003E setPostId(-1)} href=\"#\"\u003E\n Back\n \u003C\u002Fa\u003E\n \u003C\u002Fdiv\u003E\n {!postId || status === \"loading\" ? (\n \"Loading...\"\n ) : status === \"error\" ? (\n \u003Cspan\u003EError: {error.message}\u003C\u002Fspan\u003E\n ) : (\n \u003C\u003E\n \u003Ch1\u003E{data.title}\u003C\u002Fh1\u003E\n \u003Cdiv\u003E\n \u003Cp\u003E{data.body}\u003C\u002Fp\u003E\n \u003C\u002Fdiv\u003E\n \u003Cdiv\u003E{isFetching ? \"Background Updating...\" : \" \"}\u003C\u002Fdiv\u003E\n \u003C\u002F\u003E\n )}\n \u003C\u002Fdiv\u003E\n );\n}\n\nconst rootElement = document.getElementById(\"root\");\nReactDOM.render(\u003CApp \u002F\u003E, rootElement);\n","directory_shortid":"f4gugzs","id":"510a3ae3-5e78-4d3f-8544-4482d9762b21","inserted_at":"2022-05-08T07:54:08","is_binary":false,"sha":null,"shortid":"i2lqzu6","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","title":"index.js","updated_at":"2022-05-08T07:54:08","upload_id":null},{"code":"{\n \"extends\": [\"react-app\", \"prettier\"],\n \"rules\": {\n \u002F\u002F \"eqeqeq\": 0,\n \u002F\u002F \"jsx-a11y\u002Fanchor-is-valid\": 0\n }\n}\n","directory_shortid":"e91ijbx","id":"0b9fd226-bb6b-48ca-ba58-3e176f1b4b36","inserted_at":"2022-05-08T07:54:08","is_binary":false,"sha":null,"shortid":"gpm4vbv","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","title":".eslintrc","updated_at":"2022-05-08T07:54:08","upload_id":null}],"npm_registries":[],"git":{"branch":"master","commit_sha":"5848fab8a560efcf66ef0062c207c3004bccad83","path":"examples\u002Fbasic","repo":"react-query","username":"tannerlinsley"},"updated_at":"2022-05-08T07:54:08","source_id":"46c84223-6311-460a-87b7-30ff62941ba8","external_resources":[],"user_liked":false,"view_count":7930421,"picks":[],"version":448,"permissions":{"prevent_sandbox_export":false,"prevent_sandbox_leaving":false},"privacy":0,"original_git_commit_sha":null,"forked_template":null,"is_frozen":false,"room_id":null,"always_on":false,"inserted_at":"2020-11-02T00:53:07","feature_flags":{"comments":false,"container_lsp":false},"forked_template_sandbox":null,"base_git":null,"template":"create-react-app","team":null,"like_count":6,"collection":false,"fork_count":832,"owned":false,"preview_secret":null,"title":"tannerlinsley\u002Freact-query"};