: 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":"mod_KccJuxnuNGH3V7Q8VmtbS9","is_binary":false,"title":".rescriptsrc.js","sha":null,"inserted_at":"2022-06-16T20:33:28","updated_at":"2020-11-02T16:38:57","upload_id":null,"shortid":"B1B5mU3TdD","source_id":"src_Uz85LYuYfN9VTVrEM5beae","directory_shortid":null},{"code":"{}\n","id":"mod_XeVayZugS8X8m1rS6obvGC","is_binary":false,"title":".prettierrc","sha":null,"inserted_at":"2022-06-16T20:33:28","updated_at":"2020-11-02T16:38:57","upload_id":null,"shortid":"SkVqm836uD","source_id":"src_Uz85LYuYfN9VTVrEM5beae","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":"mod_FBH53PDR8FzbLyr5cVmihX","is_binary":false,"title":".gitignore","sha":null,"inserted_at":"2022-06-16T20:33:28","updated_at":"2020-11-02T16:38:57","upload_id":null,"shortid":"SkmqQLnpdw","source_id":"src_Uz85LYuYfN9VTVrEM5beae","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":"mod_D9jsmX3eyFJtinAY83UdFE","is_binary":false,"title":".eslintrc","sha":null,"inserted_at":"2022-06-16T20:33:28","updated_at":"2020-11-02T16:38:57","upload_id":null,"shortid":"B1Mq7L2pdD","source_id":"src_Uz85LYuYfN9VTVrEM5beae","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":"mod_RkmZbvfoosedXHX6VaaWnd","is_binary":false,"title":"package.json","sha":null,"inserted_at":"2022-06-16T20:33:28","updated_at":"2020-11-16T16:08:43","upload_id":null,"shortid":"HkP9XUn6dD","source_id":"src_Uz85LYuYfN9VTVrEM5beae","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\u003E모달 열기\u003C\u002Fli\u003E\n \u003Cli\u003E\n 서버에서 랜덤 데이터를 가져오는 것을 모의하지만, 로컬 상태에\n 저장하지는 않음.\n \u003C\u002Fli\u003E\n \u003Cli\u003E창을 다시 포커싱하면, 데이터를 다시 가져옴\u003C\u002Fli\u003E\n \u003Cli\u003E값을 바꾸는 건 리페치와 관련 없음\u003C\u002Fli\u003E\n \u003Cli\u003E모달을 열었다 다시 닫으면, 로딩 스피너 없이 값을 업데이트함.\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: !draft\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":"mod_G3eY7dE53z3CUEA8dkWzsd","is_binary":false,"title":"index.js","sha":null,"inserted_at":"2022-06-16T20:33:28","updated_at":"2022-06-16T20:36:02","upload_id":null,"shortid":"By9c78hTdD","source_id":"src_Uz85LYuYfN9VTVrEM5beae","directory_shortid":"Hke5QIhTdw"}],"updated_at":"2022-06-16T20:36:02","ai_consent":false,"feature_flags":{"comments":false,"container_lsp":false},"git":null,"restrictions":{"free_plan_editing_restricted":false,"live_sessions_restricted":true},"author":{"id":"user_GQY2UueMo8NNYkc2TRH3so","name":"hyeoki","username":"devtaehyeok","avatar_url":"https:\u002F\u002Fuploads.codesandbox.io\u002Fuploads\u002Favatars\u002FkbLD-ddd.png","personal_workspace_id":"ws_VkpWqn4nkHAzRx6n2uN9Hd","subscription_plan":null,"subscription_since":null},"alias":"separate-server-and-client-state-forked-bgtfqq","inserted_at":"2022-06-16T20:33:28","owned":false,"team":{"id":"ws_VkpWqn4nkHAzRx6n2uN9Hd","name":"devtaehyeok","settings":{"ai_consent":{"public_sandboxes":false,"private_sandboxes":false}},"subscription_type":null,"avatar_url":"https:\u002F\u002Fuploads.codesandbox.io\u002Fuploads\u002Favatars\u002FkbLD-ddd.png"},"authorization":"read","like_count":0,"privacy":0,"forked_from_sandbox":{"alias":"separate-server-and-client-state-rp3jx","id":"rp3jx","title":"separate-server-and-client-state","template":"create-react-app","inserted_at":"2020-11-03T07:55:54","updated_at":"2023-07-14T10:38:20","git":null,"privacy":0,"custom_template":null},"tags":[],"free_plan_editing_restricted":false,"id":"bgtfqq","template":"create-react-app","original_git":null,"permissions":{"prevent_sandbox_export":false,"prevent_sandbox_leaving":false},"directories":[{"id":"dir_F77brKcj528cMJoeSp8wSW","title":"src","inserted_at":"2022-06-16T20:33:28","updated_at":"2020-11-02T16:38:57","shortid":"Hke5QIhTdw","source_id":"src_Uz85LYuYfN9VTVrEM5beae","directory_shortid":null},{"id":"dir_DCJM2qJg1wCuEr5wS4kLth","title":"public","inserted_at":"2022-06-16T20:33:28","updated_at":"2020-11-02T16:38:57","shortid":"Bkc7Lh6uw","source_id":"src_Uz85LYuYfN9VTVrEM5beae","directory_shortid":null}],"base_git":null,"forked_template_sandbox":{"alias":"tannerlinsley-react-query-simple-1wpf6","id":"1wpf6","title":"tannerlinsley\u002Freact-query: simple","template":"create-react-app","inserted_at":"2020-11-02T14:35:08","updated_at":"2022-05-29T18:09:07","git":{"path":"examples\u002Fsimple","branch":"master","repo":"react-query","username":"tannerlinsley","commit_sha":"9f6c992feecb4694758f8767063d8ad89d842c3c"},"privacy":0,"custom_template":{"id":"sbtempl_9hyPvs2UyMAXXntByCfjb2","title":"tannerlinsley\u002Freact-query: simple","color":"#61DAFB","v2":false,"url":null,"published":false,"icon_url":"github","official":false}},"restricted":false,"pr_number":null,"is_sse":false,"entry":"src\u002Findex.js"};