Search code examples
next.jsswr

The UseSWR hook not working in nextjs component


I am trying to use the useSWR hook to fetch data from an API.

The API and requests works fine but the data is never updating. Here is the code:

import useSWR from 'swr'
import { SERVER_URL } from '../config';
import axios from 'axios'

const fetcher = url => axios.get(url).then(res => res.data)

export default function MainPageView() {

  const { routines, error } = useSWR(`${SERVER_URL}/api/routines`, fetcher, { refreshInterval: 1000 })

  return (...The rest of the component)

When using the routines inside I call it like that {routines?routines:[]}

Thank you for your help and sorry for my english :)

Edited: I will also mention that if i inspect the page with F12 and go to the network tab, I do see the requests being sent and received with the desired data (with response STATUS 304) but it never updates the routines variable.


Solution

  • Try using const { data: routines, error } = useSWR(...), the data returned by the fetcher function is available in the data property

    The answer was given by juliomalves