React how to use setInterval with useEfecct and axios request

Question

Where I've to use setInterval to fetch every second? When i try it i get this error Uncaught SyntaxError: Unexpected identifier

  useEffect(() => {
    const getHistory = async () => {
      const res = await axios.get('/api/payment', {
        headers: { Authorization: token },
      });
      setHistory(res.data);
    };
    getHistory();
  }, [token, delivered]);

Answer 1

You can useswr for this and benefit from not only built-in revalidation on interval, but also caching and deduplication.

import useSWR from 'swr'

// You can use axios if you want
const fetcher = (...args) => fetch(...args).then(res => res.json())

const { data, error } = useSWR('/api/payment', fetcher, { refreshInterval: 1000 })

if (error) return <div>failed to load</div>
if (!data) return <div>loading...</div>
return <div>Look at all this data: {data.someProperty}</div>