: 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":null,"id":"7a6db7ca-7de1-4ada-8efd-54a410e2df2a","inserted_at":"2023-03-10T11:44:02","is_binary":false,"sha":null,"shortid":"Syr9-Oc_k3","source_id":"d4567176-f9e0-415f-b90e-fe2998666856","title":".rescriptsrc.js","updated_at":"2023-03-10T11:44:02","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":"7d2b70ed-c039-4164-95c4-6f6b07d1ac3e","inserted_at":"2023-03-10T11:44:02","is_binary":false,"sha":null,"shortid":"S18qZdqOJh","source_id":"d4567176-f9e0-415f-b90e-fe2998666856","title":"README.md","updated_at":"2023-03-10T11:44:02","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 \"graphql\": \"^15.3.0\",\n \"graphql-request\": \"^3.1.0\",\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":"e86a22ae-bbd9-4eef-8d26-fbd4f76c00a8","inserted_at":"2023-03-10T11:44:02","is_binary":false,"sha":null,"shortid":"HyD5-OquJn","source_id":"d4567176-f9e0-415f-b90e-fe2998666856","title":"package.json","updated_at":"2023-03-10T11:44:02","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":"H1qWd5u1n","id":"eab625e9-5fd2-4494-bfd2-83c19dd8f097","inserted_at":"2023-03-10T11:44:02","is_binary":false,"sha":null,"shortid":"S1u5bu5dJ3","source_id":"d4567176-f9e0-415f-b90e-fe2998666856","title":"index.html","updated_at":"2023-03-10T11:44:02","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":"H1qWd5u1n","id":"49651ed1-f010-4508-96ce-c5b64d0a5414","inserted_at":"2023-03-10T11:44:02","is_binary":false,"sha":null,"shortid":"HyFqZOcOkn","source_id":"d4567176-f9e0-415f-b90e-fe2998666856","title":"manifest.json","updated_at":"2023-03-10T11:44:02","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":"rkg9-u5OJn","id":"35f8cf85-8ee6-47df-bca4-8f3d558f5201","inserted_at":"2023-03-10T11:44:02","is_binary":false,"sha":null,"shortid":"SJ5qW_cuJn","source_id":"d4567176-f9e0-415f-b90e-fe2998666856","title":"index.js","updated_at":"2023-03-10T11:44:02","upload_id":null},{"code":"https:\u002F\u002Frawcdn.githack.com\u002FTanStack\u002Fquery\u002Fv3\u002Fexamples\u002Fbasic-graphql-request\u002Fpublic\u002Ffavicon.ico","directory_shortid":"H1qWd5u1n","id":"b0289e1f-752a-400a-a302-ca3ed4f54419","inserted_at":"2023-03-10T11:44:02","is_binary":true,"sha":null,"shortid":"Syi9b_cdy3","source_id":"d4567176-f9e0-415f-b90e-fe2998666856","title":"favicon.ico","updated_at":"2023-03-10T11:44:02","upload_id":null}],"view_count":33580,"is_frozen":false,"permissions":{"prevent_sandbox_export":false,"prevent_sandbox_leaving":false},"npm_registries":[],"updated_at":"2023-03-10T11:44:02","npm_dependencies":{},"forked_template_sandbox":null,"source_id":"d4567176-f9e0-415f-b90e-fe2998666856","authorization":"read","tags":[],"id":"9hcyo2","picks":[],"restrictions":{"free_plan_editing_restricted":false,"live_sessions_restricted":false},"like_count":0,"base_git":null,"forked_from_sandbox":null,"fork_count":10,"description":null,"title":"TanStack\u002Fquery: basic-graphql-request","user_liked":false,"team":null,"room_id":null,"entry":"src\u002Findex.js","pr_number":null,"privacy":0};