: 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":"63ba4890-2035-4c36-a201-c6ad6ba019bb","inserted_at":"2021-10-19T06:14:47","is_binary":false,"sha":null,"shortid":"Hk7yPz1nSK","source_id":"6684a945-3f12-43cc-80e2-74dabf33d1e7","title":"next.config.js","updated_at":"2021-10-19T06:14:47","upload_id":null},{"code":"{\n \"name\": \"refetch-interval\",\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":"13b24c59-a4a4-4b5c-b3e1-6b16d555cc4c","inserted_at":"2021-10-19T06:14:47","is_binary":false,"sha":null,"shortid":"HyVyPGy3rt","source_id":"6684a945-3f12-43cc-80e2-74dabf33d1e7","title":"package.json","updated_at":"2021-10-19T06:14:47","upload_id":null},{"code":"\u002F\u002F an simple endpoint for getting current list\nlet list = ['Item 1', 'Item 2', 'Item 3']\n\nexport default async (req, res) =\u003E {\n if (req.query.add) {\n if (!list.includes(req.query.add)) {\n list.push(req.query.add)\n }\n } else if (req.query.clear) {\n list = []\n }\n\n await new Promise(r =\u003E setTimeout(r, 100))\n\n res.json(list)\n}\n","directory_shortid":"BylJPMknHY","id":"97ea6eb2-7197-4f06-b2d6-01cd88b1bd97","inserted_at":"2021-10-19T06:14:47","is_binary":false,"sha":null,"shortid":"SkS1Pz1nSt","source_id":"6684a945-3f12-43cc-80e2-74dabf33d1e7","title":"data.js","updated_at":"2021-10-19T06:14:47","upload_id":null},{"code":"import React from 'react'\nimport axios from 'axios'\n\n\u002F\u002F\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 [intervalMs, setIntervalMs] = React.useState(1000)\n const [value, setValue] = React.useState('')\n\n const { status, data, error, isFetching } = useQuery(\n 'todos',\n async () =\u003E {\n const res = await axios.get('\u002Fapi\u002Fdata')\n return res.data\n },\n {\n \u002F\u002F Refetch the data every second\n refetchInterval: intervalMs,\n }\n )\n\n const addMutation = useMutation(value =\u003E fetch(`\u002Fapi\u002Fdata?add=${value}`), {\n onSuccess: () =\u003E queryClient.invalidateQueries('todos'),\n })\n\n const clearMutation = useMutation(() =\u003E fetch(`\u002Fapi\u002Fdata?clear=1`), {\n onSuccess: () =\u003E queryClient.invalidateQueries('todos'),\n })\n\n if (status === 'loading') return \u003Ch1\u003ELoading...\u003C\u002Fh1\u003E\n if (status === 'error') return \u003Cspan\u003EError: {error.message}\u003C\u002Fspan\u003E\n\n return (\n \u003Cdiv\u003E\n \u003Ch1\u003EAuto Refetch with stale-time set to 1s)\u003C\u002Fh1\u003E\n \u003Cp\u003E\n This example is best experienced on your own machine, where you can open\n multiple tabs to the same localhost server and see your changes\n propagate between the two.\n \u003C\u002Fp\u003E\n \u003Clabel\u003E\n Query Interval speed (ms):{' '}\n \u003Cinput\n value={intervalMs}\n onChange={ev =\u003E setIntervalMs(Number(ev.target.value))}\n type=\"number\"\n step=\"100\"\n \u002F\u003E{' '}\n \u003Cspan\n style={{\n display: 'inline-block',\n marginLeft: '.5rem',\n width: 10,\n height: 10,\n background: isFetching ? 'green' : 'transparent',\n transition: !isFetching ? 'all .3s ease' : 'none',\n borderRadius: '100%',\n transform: 'scale(2)',\n }}\n \u002F\u003E\n \u003C\u002Flabel\u003E\n \u003Ch2\u003ETodo List\u003C\u002Fh2\u003E\n \u003Cform\n onSubmit={event =\u003E {\n event.preventDefault()\n addMutation.mutate(value, {\n onSuccess: () =\u003E {\n setValue('')\n },\n })\n }}\n \u003E\n \u003Cinput\n placeholder=\"enter something\"\n value={value}\n onChange={ev =\u003E setValue(ev.target.value)}\n \u002F\u003E\n \u003C\u002Fform\u003E\n \u003Cul\u003E\n {data.map(item =\u003E (\n \u003Cli key={item}\u003E{item}\u003C\u002Fli\u003E\n ))}\n \u003C\u002Ful\u003E\n \u003Cdiv\u003E\n \u003Cbutton\n onClick={() =\u003E {\n clearMutation.mutate()\n }}\n \u003E\n Clear All\n \u003C\u002Fbutton\u003E\n \u003C\u002Fdiv\u003E\n \u003CReactQueryDevtools initialIsOpen \u002F\u003E\n \u003C\u002Fdiv\u003E\n )\n}\n","directory_shortid":"ryywGk2rK","id":"67801c7c-0e45-4b4e-aee7-15efdd170216","inserted_at":"2021-10-19T06:14:47","is_binary":false,"sha":null,"shortid":"HkL1vMynrK","source_id":"6684a945-3f12-43cc-80e2-74dabf33d1e7","title":"index.js","updated_at":"2021-10-19T06:14:47","upload_id":null}],"collection":false,"original_git":null,"view_count":635035,"is_sse":true,"room_id":null,"version":595,"description":null};