: 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":"28ec2c6f-b1d1-4dd0-bd97-c41a563d36dd","inserted_at":"2022-01-23T15:59:37","is_binary":false,"sha":null,"shortid":"S17zdjgipK","source_id":"ff987db7-5902-48bc-953c-f20202f5d521","title":"next.config.js","updated_at":"2022-01-23T15:59:37","upload_id":null},{"code":"{\n \"name\": \"optimistic-updates\",\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.2.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":"9fecec7c-078f-4c58-82bf-63bb7096c5b9","inserted_at":"2022-01-23T15:59:37","is_binary":false,"sha":null,"shortid":"Hy4GOilspK","source_id":"ff987db7-5902-48bc-953c-f20202f5d521","title":"package.json","updated_at":"2022-01-23T15:59:37","upload_id":null},{"code":"const items = []\n\nexport default async (req, res) =\u003E {\n await new Promise(r =\u003E setTimeout(r, 1000))\n\n if (req.method === 'POST') {\n const { text } = req.body\n\n \u002F\u002F sometimes it will fail, this will cause a regression on the UI\n\n if (Math.random() \u003E 0.7) {\n res.status(500)\n res.json({ message: 'Could not add item!' })\n return\n }\n\n items.push(text.toUpperCase())\n res.json(text.toUpperCase())\n return\n } else {\n res.json({\n ts: Date.now(),\n items,\n })\n }\n}\n","directory_shortid":"SkxzdjgoaY","id":"8b572928-61ce-4ed3-bdc6-f7d828ed1a92","inserted_at":"2022-01-23T15:59:37","is_binary":false,"sha":null,"shortid":"BJSfdogs6Y","source_id":"ff987db7-5902-48bc-953c-f20202f5d521","title":"data.js","updated_at":"2022-01-23T15:59:37","upload_id":null},{"code":"import React from 'react'\nimport axios from 'axios'\n\nimport {\n useQuery,\n useQueryClient,\n useMutation,\n QueryClient,\n QueryClientProvider,\n} from 'react-query'\nimport { ReactQueryDevtools } from 'react-query\u002Fdevtools'\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 [text, setText] = React.useState('')\n\n const { status, data, error, isFetching } = useQuery('todos', async () =\u003E {\n const res = await axios.get('\u002Fapi\u002Fdata')\n return res.data\n })\n\n const addTodoMutation = useMutation(\n text =\u003E axios.post('\u002Fapi\u002Fdata', { text }),\n {\n \u002F\u002F Optimistically update the cache value on mutate, but store\n \u002F\u002F the old value and return it so that it's accessible in case of\n \u002F\u002F an error\n onMutate: async text =\u003E {\n setText('')\n await queryClient.cancelQueries('todos')\n\n const previousValue = queryClient.getQueryData('todos')\n\n queryClient.setQueryData('todos', old =\u003E ({\n ...old,\n items: [...old.items, text],\n }))\n\n return previousValue\n },\n \u002F\u002F On failure, roll back to the previous value\n onError: (err, variables, previousValue) =\u003E\n queryClient.setQueryData('todos', previousValue),\n \u002F\u002F After success or failure, refetch the todos query\n onSettled: () =\u003E {\n queryClient.invalidateQueries('todos')\n },\n }\n )\n\n return (\n \u003Cdiv\u003E\n \u003Cp\u003E\n In this example, new items can be created using a mutation. The new item\n will be optimistically added to the list in hopes that the server\n accepts the item. If it does, the list is refetched with the true items\n from the list. Every now and then, the mutation may fail though. When\n that happens, the previous list of items is restored and the list is\n again refetched from the server.\n \u003C\u002Fp\u003E\n \u003Cform\n onSubmit={e =\u003E {\n e.preventDefault()\n addTodoMutation.mutate(text)\n }}\n \u003E\n \u003Cinput\n type=\"text\"\n onChange={event =\u003E setText(event.target.value)}\n value={text}\n \u002F\u003E\n \u003Cbutton\u003E{addTodoMutation.isLoading ? 'Creating...' : 'Create'}\u003C\u002Fbutton\u003E\n \u003C\u002Fform\u003E\n \u003Cbr \u002F\u003E\n {status === 'loading' ? (\n 'Loading...'\n ) : status === 'error' ? (\n error.message\n ) : (\n \u003C\u003E\n \u003Cdiv\u003EUpdated At: {new Date(data.ts).toLocaleTimeString()}\u003C\u002Fdiv\u003E\n \u003Cul\u003E\n {data.items.map(datum =\u003E (\n \u003Cli key={datum}\u003E{datum}\u003C\u002Fli\u003E\n ))}\n \u003C\u002Ful\u003E\n \u003Cdiv\u003E{isFetching ? 'Updating in background...' : ' '}\u003C\u002Fdiv\u003E\n \u003C\u002F\u003E\n )}\n \u003CReactQueryDevtools initialIsOpen \u002F\u003E\n \u003C\u002Fdiv\u003E\n )\n}\n","directory_shortid":"BJGOoxsTt","id":"43e25fe1-ed8a-45a2-8a54-8d63d75d5f21","inserted_at":"2022-01-23T15:59:37","is_binary":false,"sha":null,"shortid":"BkLGuiliTF","source_id":"ff987db7-5902-48bc-953c-f20202f5d521","title":"index.js","updated_at":"2022-01-23T15:59:37","upload_id":null}],"inserted_at":"2019-12-14T14:36:01","forked_template_sandbox":null,"directories":[{"directory_shortid":null,"id":"750b1a58-c5e4-40e7-891e-1af845a75a41","inserted_at":"2022-01-23T15:59:37","shortid":"BJGOoxsTt","source_id":"ff987db7-5902-48bc-953c-f20202f5d521","title":"pages","updated_at":"2022-01-23T15:59:37"},{"directory_shortid":"BJGOoxsTt","id":"744daa7b-9a5d-4293-b175-ea1bc321428b","inserted_at":"2022-01-23T15:59:37","shortid":"SkxzdjgoaY","source_id":"ff987db7-5902-48bc-953c-f20202f5d521","title":"api","updated_at":"2022-01-23T15:59:37"}],"npm_registries":[],"forked_from_sandbox":null,"version":638,"forked_template":null,"feature_flags":{"comments":false,"container_lsp":false},"fork_count":378,"always_on":false,"entry":"package.json"};