: 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","id":"bca6fcea-7c49-4bb8-bbe9-d9184c1a86d3","is_binary":false,"title":".rescriptsrc.js","sha":null,"inserted_at":"2020-11-03T07:55:54","updated_at":"2020-11-02T16:38:57","upload_id":null,"shortid":"B1B5mU3TdD","source_id":"14126a69-12c1-4edb-a7c5-5ac3b4f83bd5","directory_shortid":null},{"code":"{}\n","id":"b143128b-30f7-4352-bf5f-02e27dbe5117","is_binary":false,"title":".prettierrc","sha":null,"inserted_at":"2020-11-03T07:55:54","updated_at":"2020-11-02T16:38:57","upload_id":null,"shortid":"SkVqm836uD","source_id":"14126a69-12c1-4edb-a7c5-5ac3b4f83bd5","directory_shortid":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","id":"cc3bc096-f802-48eb-a1bb-aa4f796ceb74","is_binary":false,"title":".gitignore","sha":null,"inserted_at":"2020-11-03T07:55:54","updated_at":"2020-11-02T16:38:57","upload_id":null,"shortid":"SkmqQLnpdw","source_id":"14126a69-12c1-4edb-a7c5-5ac3b4f83bd5","directory_shortid":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","id":"3ef2e358-7eb4-4e01-bc42-d39a74de2fdb","is_binary":false,"title":".eslintrc","sha":null,"inserted_at":"2020-11-03T07:55:54","updated_at":"2020-11-02T16:38:57","upload_id":null,"shortid":"B1Mq7L2pdD","source_id":"14126a69-12c1-4edb-a7c5-5ac3b4f83bd5","directory_shortid":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 \"react\": \"^16.8.6\",\n \"react-dom\": \"^16.8.6\",\n \"react-query\": \"2.26.2\",\n \"react-query-devtools\": \"2.6.3\",\n \"react-scripts\": \"3.0.1\"\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 \"keywords\": [],\n \"name\": \"separate-server-and-client-state\",\n \"description\": \"\"\n}","id":"f994ea89-c497-4558-9614-2722c74ae733","is_binary":false,"title":"package.json","sha":null,"inserted_at":"2020-11-03T07:55:54","updated_at":"2020-11-16T16:08:43","upload_id":null,"shortid":"HkP9XUn6dD","source_id":"14126a69-12c1-4edb-a7c5-5ac3b4f83bd5","directory_shortid":null},{"code":"import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { useQuery, QueryCache, ReactQueryCacheProvider } from \"react-query\";\nimport { ReactQueryDevtools } from \"react-query-devtools\";\n\nconst queryCache = new QueryCache();\n\nexport default function App() {\n return (\n \u003CReactQueryCacheProvider queryCache={queryCache}\u003E\n \u003CExample \u002F\u003E\n \u003C\u002FReactQueryCacheProvider\u003E\n );\n}\n\nfunction Example() {\n const [isOpen, setIsOpen] = React.useState(false);\n\n return (\n \u003Cdiv\u003E\n \u003Cul\u003E\n \u003Cli\u003EOpen the Modal\u003C\u002Fli\u003E\n \u003Cli\u003E\n It will load a random number and show it, but not put it to state\n \u003C\u002Fli\u003E\n \u003Cli\u003ERe-focus the window - the value will still update\u003C\u002Fli\u003E\n \u003Cli\u003E\n Change the value: Your draft now takes precedence and the query is\n disabled\n \u003C\u002Fli\u003E\n \u003Cli\u003E\n Close the modal and open it again: No loading spinner, value will\n update\n \u003C\u002Fli\u003E\n \u003C\u002Ful\u003E\n \u003Cbutton type=\"button\" onClick={() =\u003E setIsOpen(true)}\u003E\n Open\n \u003C\u002Fbutton\u003E\n {isOpen && \u003CModal close={() =\u003E setIsOpen(false)} \u002F\u003E}\n \u003CReactQueryDevtools\n initialIsOpen\n panelProps={{ style: { height: 250 } }}\n \u002F\u003E\n \u003C\u002Fdiv\u003E\n );\n}\n\nconst sleep = (time) =\u003E new Promise((resolve) =\u003E setTimeout(resolve, time));\n\nconst useRandomValue = () =\u003E {\n const [draft, setDraft] = React.useState(undefined);\n const { data, ...queryInfo } = useQuery(\n \"random\",\n async () =\u003E {\n await sleep(1000);\n return Promise.resolve(String(Math.random()));\n },\n {\n enabled: typeof draft === \"undefined\"\n }\n );\n\n return {\n value: draft ?? data,\n setDraft,\n queryInfo\n };\n};\n\nfunction Modal({ close }) {\n const {\n value,\n setDraft,\n queryInfo: { isLoading, error }\n } = useRandomValue();\n\n return (\n \u003Cdiv\n style={{\n position: \"fixed\",\n top: \"0\",\n left: \"0\",\n paddingTop: \"10px\",\n width: \"100%\",\n height: \"100%\",\n backgroundColor: \"rgba(0,0,0,0.4)\"\n }}\n \u003E\n \u003Cdiv\n style={{\n display: \"flex\",\n justifyContent: \"center\",\n width: \"80%\",\n height: \"25vh\",\n margin: \"auto\",\n backgroundColor: \"white\"\n }}\n \u003E\n \u003Cdiv\u003E\n {isLoading && \"Loading...\"}\n {error && \"error\"}\n {value !== undefined && (\n \u003Cinput\n type=\"text\"\n value={value}\n onChange={(event) =\u003E setDraft(event.target.value)}\n \u002F\u003E\n )}\n \u003Cspan style={{ cursor: \"pointer\" }} onClick={close}\u003E\n ×\n \u003C\u002Fspan\u003E\n \u003C\u002Fdiv\u003E\n \u003C\u002Fdiv\u003E\n \u003C\u002Fdiv\u003E\n );\n}\n\nconst rootElement = document.getElementById(\"root\");\nReactDOM.render(\u003CApp \u002F\u003E, rootElement);\n","id":"3865c00b-2f23-4770-983e-987af1ed011e","is_binary":false,"title":"index.js","sha":null,"inserted_at":"2020-11-03T07:55:54","updated_at":"2023-07-14T10:37:31","upload_id":null,"shortid":"By9c78hTdD","source_id":"14126a69-12c1-4edb-a7c5-5ac3b4f83bd5","directory_shortid":"Hke5QIhTdw"}],"source_id":"14126a69-12c1-4edb-a7c5-5ac3b4f83bd5","base_git":null,"like_count":3,"id":"rp3jx","npm_registries":[],"free_plan_editing_restricted":false,"settings":{"ai_consent":null},"title":"separate-server-and-client-state","screenshot_url":"https:\u002F\u002Fscreenshots.codesandbox.io\u002Frp3jx\u002F53.png","pr_number":null,"template":"create-react-app","permissions":{"prevent_sandbox_export":false,"prevent_sandbox_leaving":false},"npm_dependencies":{},"authorization":"read","forked_template":{"id":"46819d6c-2c08-4bd1-829e-77ac7257ab3d","title":"tannerlinsley\u002Freact-query: simple","color":"#61DAFB","v2":false,"url":null,"published":false,"icon_url":"github","official":false},"forked_from_sandbox":null,"ai_consent":false,"custom_template":null,"room_id":null};