0

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.

Guy Mayo
  • 23
  • 6
  • 1
    Try using `const { data: routines, error } = useSWR(...)`, the data returned by the `fetcher` function is available in the `data` property. – juliomalves Jan 03 '22 at 13:32
  • 1
    @juliomalves Thank you it worked !! :) I will add an answer with your comment and credit you. – Guy Mayo Jan 05 '22 at 08:16

2 Answers2

1

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

Guy Mayo
  • 23
  • 6
0

useSWR hook returns 3 states data, loading and error

try something like this

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

using data

{data?.properties?.map((item)=>...) }
Chemi Adel
  • 1,964
  • 1
  • 10
  • 18