: resolveFrom(\n path.resolve('node_modules'),\n 'react-query'\n ),\n 'react-dom

: resolveFrom(path.resolve('node_modules'), 'react-dom'),\n },\n }\n return config\n },\n}\n","directory_shortid":null,"id":"6bacdc93-97d0-44e8-bcba-4dfa6db354f9","inserted_at":"2023-03-10T11:11:54","is_binary":false,"sha":null,"shortid":"Sy8GKg5uy2","source_id":"19369374-039b-4785-addf-1d39b96a2b51","title":"next.config.js","updated_at":"2023-03-10T11:11:54","upload_id":null},{"code":"{\n \"name\": \"prefetching\",\n \"version\": \"1.0.0\",\n \"main\": \"index.js\",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"axios\": \"^0.21.1\",\n \"isomorphic-unfetch\": \"3.0.0\",\n \"next\": \"9.3.2\",\n \"react\": \"16.13.0\",\n \"react-dom\": \"16.13.0\",\n \"react-query\": \"^3.5.0\"\n },\n \"scripts\": {\n \"dev\": \"next\",\n \"start\": \"next start\",\n \"build\": \"next build\"\n }\n}\n","directory_shortid":null,"id":"78fec0ff-0558-47cc-a7c2-52e66a367b23","inserted_at":"2023-03-10T11:11:54","is_binary":false,"sha":null,"shortid":"BkPfYlcOJh","source_id":"19369374-039b-4785-addf-1d39b96a2b51","title":"package.json","updated_at":"2023-03-10T11:11:54","upload_id":null},{"code":"import React from 'react'\nimport Link from 'next\u002Flink'\nimport fetch from '..\u002F..\u002Flibs\u002Ffetch'\n\nimport { useQuery } from 'react-query'\n\nexport default () =\u003E {\n const id =\n typeof window !== 'undefined' ? window.location.pathname.slice(1) : ''\n\n const { status, data, error, isFetching } = useQuery(\n ['team', id],\n () =\u003E fetch('\u002Fapi\u002Fdata?id=' + id)\n )\n\n return (\n \u003Cdiv style={{ textAlign: 'center' }}\u003E\n \u003Ch1\u003E{id}\u003C\u002Fh1\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 \u003Cp\u003Eforks: {data.forks_count}\u003C\u002Fp\u003E\n \u003Cp\u003Estars: {data.stargazers_count}\u003C\u002Fp\u003E\n \u003Cp\u003Ewatchers: {data.watchers}\u003C\u002Fp\u003E\n \u003C\u002Fdiv\u003E\n \u003Cdiv\u003E{isFetching ? 'Background Updating...' : ' '}\u003C\u002Fdiv\u003E\n \u003C\u002F\u003E\n )}\n \u003Cbr \u002F\u003E\n \u003Cbr \u002F\u003E\n \u003CLink href=\"\u002F\"\u003E\n \u003Ca\u003EBack\u003C\u002Fa\u003E\n \u003C\u002FLink\u003E\n \u003C\u002Fdiv\u003E\n )\n}\n","directory_shortid":"HJWzYgqO13","id":"3cb4db69-bec0-4f4a-9200-ad91a1494404","inserted_at":"2023-03-10T11:11:54","is_binary":false,"sha":null,"shortid":"HydMFl5dy3","source_id":"19369374-039b-4785-addf-1d39b96a2b51","title":"[repo].js","updated_at":"2023-03-10T11:11:54","upload_id":null},{"code":"import fetch from 'isomorphic-unfetch'\n\nconst projects = [\n 'tannerlinsley\u002Freact-query',\n 'tannerlinsley\u002Freact-table',\n 'facebook\u002Freact',\n 'zeit\u002Fnext.js',\n]\n\nexport default (req, res) =\u003E {\n if (req.query.id) {\n \u002F\u002F a slow endpoint for getting repo data\n fetch(`https:\u002F\u002Fapi.github.com\u002Frepos\u002F${req.query.id}`)\n .then(resp =\u003E resp.json())\n .then(data =\u003E {\n setTimeout(() =\u003E {\n res.json(data)\n }, 2000)\n })\n\n return\n }\n setTimeout(() =\u003E {\n res.json(projects)\n }, 2000)\n}\n","directory_shortid":"BJGGtl9uJn","id":"f0613e09-bfb1-44ca-85d7-aaada40d0adf","inserted_at":"2023-03-10T11:11:54","is_binary":false,"sha":null,"shortid":"SJtMKx9_1n","source_id":"19369374-039b-4785-addf-1d39b96a2b51","title":"data.js","updated_at":"2023-03-10T11:11:54","upload_id":null},{"code":"import React from 'react'\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 getCharacters = async () =\u003E {\n await new Promise(r =\u003E setTimeout(r, 500))\n const { data } = await axios.get('https:\u002F\u002Frickandmortyapi.com\u002Fapi\u002Fcharacter\u002F')\n return data\n}\n\nconst getCharacter = async selectedChar =\u003E {\n await new Promise(r =\u003E setTimeout(r, 500))\n const { data } = await axios.get(\n `https:\u002F\u002Frickandmortyapi.com\u002Fapi\u002Fcharacter\u002F${selectedChar}`\n )\n return data\n}\n\nconst queryClient = new QueryClient()\n\nexport default function App() {\n return (\n \u003CQueryClientProvider client={queryClient}\u003E\n \u003CExample \u002F\u003E\n \u003C\u002FQueryClientProvider\u003E\n )\n}\n\nfunction Example() {\n const queryClient = useQueryClient()\n const rerender = React.useState(0)[1]\n const [selectedChar, setSelectedChar] = React.useState(1)\n\n const charactersQuery = useQuery('characters', getCharacters)\n\n const characterQuery = useQuery(['character', selectedChar], () =\u003E\n getCharacter(selectedChar)\n )\n\n return (\n \u003Cdiv className=\"App\"\u003E\n \u003Cp\u003E\n Hovering over a character will prefetch it, and when it's been\n prefetched it will turn \u003Cstrong\u003Ebold\u003C\u002Fstrong\u003E. Clicking on a prefetched\n character will show their stats below immediately.\n \u003C\u002Fp\u003E\n \u003Ch2\u003ECharacters\u003C\u002Fh2\u003E\n {charactersQuery.isLoading ? (\n 'Loading...'\n ) : (\n \u003C\u003E\n \u003Cul\u003E\n {charactersQuery.data?.results.map(char =\u003E (\n \u003Cli\n key={char.id}\n onClick={() =\u003E {\n setSelectedChar(char.id)\n }}\n onMouseEnter={async () =\u003E {\n await queryClient.prefetchQuery(\n ['character', char.id],\n () =\u003E getCharacter(char.id),\n {\n staleTime: 10 * 1000, \u002F\u002F only prefetch if older than 10 seconds\n }\n )\n\n setTimeout(() =\u003E {\n rerender({})\n }, 1)\n }}\n \u003E\n \u003Cdiv\n style={\n queryClient.getQueryData(['character', char.id])\n ? {\n fontWeight: 'bold',\n }\n : {}\n }\n \u003E\n {char.id} - {char.name}\n \u003C\u002Fdiv\u003E\n \u003C\u002Fli\u003E\n ))}\n \u003C\u002Ful\u003E\n\n \u003Ch3\u003ESelected Character\u003C\u002Fh3\u003E\n {characterQuery.isLoading ? (\n 'Loading...'\n ) : (\n \u003C\u003E\n \u003Cpre\u003E{JSON.stringify(characterQuery.data, null, 2)}\u003C\u002Fpre\u003E\n \u003C\u002F\u003E\n )}\n \u003CReactQueryDevtools initialIsOpen \u002F\u003E\n \u003C\u002F\u003E\n )}\n \u003C\u002Fdiv\u003E\n )\n}\n","directory_shortid":"H1lMYgq_12","id":"6f96fa4c-4c1c-4f69-a588-3bc49c945b77","inserted_at":"2023-03-10T11:11:54","is_binary":false,"sha":null,"shortid":"S1czteq_k3","source_id":"19369374-039b-4785-addf-1d39b96a2b51","title":"index.js","updated_at":"2023-03-10T11:11:54","upload_id":null}],"always_on":false,"feature_flags":{"comments":false,"container_lsp":false},"base_git":null,"tags":[],"privacy":0,"forked_from_sandbox":null,"original_git_commit_sha":null,"git":{"branch":"v3","commit_sha":"718903debf4dc2c01e088af030ec30138e9f1ade","path":"examples\u002Fprefetching","repo":"react-query","username":"tannerlinsley"},"updated_at":"2023-03-10T11:11:54","id":"19jvz3","screenshot_url":"https:\u002F\u002Fscreenshots.codesandbox.io\u002F19jvz3\u002F2.png","fork_count":4,"pr_number":null,"external_resources":[],"forked_template_sandbox":null,"team":null,"title":"prefetching","restrictions":{"free_plan_editing_restricted":false,"live_sessions_restricted":false},"description":null,"collection":false};