: 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":"c5854cb1-dac7-4f45-bbcc-d41ca471616f","inserted_at":"2021-04-10T14:15:53","is_binary":false,"sha":null,"shortid":"SyBWXX418O","source_id":"fb71810f-3b3a-4b62-ab24-e3d55099975d","title":"next.config.js","updated_at":"2021-04-10T14:15:53","upload_id":null},{"code":"{\n \"name\": \"pagination\",\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":"d6dd6036-b57e-4706-9cde-b71be6df808d","inserted_at":"2021-04-10T14:15:53","is_binary":false,"sha":null,"shortid":"SkL-7mEyLd","source_id":"fb71810f-3b3a-4b62-ab24-e3d55099975d","title":"package.json","updated_at":"2021-04-10T14:15:53","upload_id":null},{"code":"export default () =\u003E {\n return (\n \u003Ca\n href=\"\"\n onClick={e =\u003E {\n window.history.back()\n e.preventDefault()\n }}\n \u003E\n Back\n \u003C\u002Fa\u003E\n )\n}\n","directory_shortid":"HJe-mmE1Ud","id":"3a861e57-1777-4105-a433-8d22c978c978","inserted_at":"2021-04-10T14:15:53","is_binary":false,"sha":null,"shortid":"H1wZmQNk8d","source_id":"fb71810f-3b3a-4b62-ab24-e3d55099975d","title":"about.js","updated_at":"2021-04-10T14:15:53","upload_id":null},{"code":"\u002F\u002F an endpoint for getting projects data\nexport default (req, res) =\u003E {\n const cursor = parseInt(req.query.cursor) || 0\n const pageSize = 5\n\n const data = Array(pageSize)\n .fill(0)\n .map((_, i) =\u003E {\n return {\n name: 'Project ' + (i + cursor) + ` (server time: ${Date.now()})`,\n id: i + cursor,\n }\n })\n\n const nextId = cursor \u003C 10 ? data[data.length - 1].id + 1 : null\n const previousId = cursor \u003E -10 ? data[0].id - pageSize : null\n\n setTimeout(() =\u003E res.json({ data, nextId, previousId }), 1000)\n}\n","directory_shortid":"SyZbmX4JUO","id":"52dca39f-bc94-429c-a2b3-63974abd5541","inserted_at":"2021-04-10T14:15:53","is_binary":false,"sha":null,"shortid":"ry_WQmEkUO","source_id":"fb71810f-3b3a-4b62-ab24-e3d55099975d","title":"projects.js","updated_at":"2021-04-10T14:15:53","upload_id":null},{"code":"import React from 'react'\nimport Link from 'next\u002Flink'\nimport axios from 'axios'\n\nimport { useInfiniteQuery, QueryClient, QueryClientProvider } from 'react-query'\nimport { ReactQueryDevtools } from 'react-query\u002Fdevtools'\n\n\u002F\u002F\n\nimport useIntersectionObserver from '..\u002Fhooks\u002FuseIntersectionObserver'\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 {\n status,\n data,\n error,\n isFetching,\n isFetchingNextPage,\n isFetchingPreviousPage,\n fetchNextPage,\n fetchPreviousPage,\n hasNextPage,\n hasPreviousPage,\n } = useInfiniteQuery(\n 'projects',\n async ({ pageParam = 0 }) =\u003E {\n const res = await axios.get('\u002Fapi\u002Fprojects?cursor=' + pageParam)\n return res.data\n },\n {\n getPreviousPageParam: firstPage =\u003E firstPage.previousId ?? false,\n getNextPageParam: lastPage =\u003E lastPage.nextId ?? false,\n }\n )\n\n const loadMoreButtonRef = React.useRef()\n\n useIntersectionObserver({\n target: loadMoreButtonRef,\n onIntersect: fetchNextPage,\n enabled: hasNextPage,\n })\n\n return (\n \u003Cdiv\u003E\n \u003Ch1\u003EInfinite Loading\u003C\u002Fh1\u003E\n {status === 'loading' ? (\n \u003Cp\u003ELoading...\u003C\u002Fp\u003E\n ) : status === 'error' ? (\n \u003Cspan\u003EError: {error.message}\u003C\u002Fspan\u003E\n ) : (\n \u003C\u003E\n \u003Cdiv\u003E\n \u003Cbutton\n onClick={() =\u003E fetchPreviousPage()}\n disabled={!hasPreviousPage || isFetchingPreviousPage}\n \u003E\n {isFetchingNextPage\n ? 'Loading more...'\n : hasNextPage\n ? 'Load Older'\n : 'Nothing more to load'}\n \u003C\u002Fbutton\u003E\n \u003C\u002Fdiv\u003E\n {data.pages.map(page =\u003E (\n \u003CReact.Fragment key={page.nextId}\u003E\n {page.data.map(project =\u003E (\n \u003Cp\n style={{\n border: '1px solid gray',\n borderRadius: '5px',\n padding: '10rem 1rem',\n background: `hsla(${project.id * 30}, 60%, 80%, 1)`,\n }}\n key={project.id}\n \u003E\n {project.name}\n \u003C\u002Fp\u003E\n ))}\n \u003C\u002FReact.Fragment\u003E\n ))}\n \u003Cdiv\u003E\n \u003Cbutton\n ref={loadMoreButtonRef}\n onClick={() =\u003E fetchNextPage()}\n disabled={!hasNextPage || isFetchingNextPage}\n \u003E\n {isFetchingNextPage\n ? 'Loading more...'\n : hasNextPage\n ? 'Load Newer'\n : 'Nothing more to load'}\n \u003C\u002Fbutton\u003E\n \u003C\u002Fdiv\u003E\n \u003Cdiv\u003E\n {isFetching && !isFetchingNextPage\n ? 'Background Updating...'\n : null}\n \u003C\u002Fdiv\u003E\n \u003C\u002F\u003E\n )}\n \u003Chr \u002F\u003E\n \u003CLink href=\"\u002Fabout\"\u003E\n \u003Ca\u003EGo to another page\u003C\u002Fa\u003E\n \u003C\u002FLink\u003E\n \u003CReactQueryDevtools initialIsOpen \u002F\u003E\n \u003C\u002Fdiv\u003E\n )\n}\n","directory_shortid":"HJe-mmE1Ud","id":"559b77da-2109-4e30-94d5-a86d100b7647","inserted_at":"2021-04-10T14:15:53","is_binary":false,"sha":null,"shortid":"H1tWXmNk8_","source_id":"fb71810f-3b3a-4b62-ab24-e3d55099975d","title":"index.js","updated_at":"2021-04-10T14:15:53","upload_id":null}],"picks":[],"custom_template":{"color":"#61DAFB","icon_url":"github","id":"af0e3ae2-167c-49fd-9aea-417ca38c8ad3","official":false,"published":true,"title":"pagination","url":null},"entry":"package.json","forked_template_sandbox":null,"collection":false,"npm_dependencies":{},"alias":"pagination-it39i","preview_secret":null,"version":154,"base_git":null,"original_git":null,"screenshot_url":"https:\u002F\u002Fscreenshots.codesandbox.io\u002Fit39i\u002F154.png","is_frozen":false,"feature_flags":{"comments":false,"container_lsp":false}};