SWR with Expo

[crismarucci]

Hi! I'm a newbie with SWR. I'm getting a lot of errors in my app while trying to make it work... but I'm asking myself if this library works with Expo? Tks for your help.

[huozhi]

@crismarucci could you help provide few stack traces for the errors you saw? are you trying to play swr with React Native?

[crismarucci]

Hi huozhi, yes, I'm trying to using it with React Native in an Expo app.
Regarding the errors, now it's stuck in "loading", I mean, this is executed all the way:

if (!data) return <Text>Loading...</Text>

I think that maybe I have some issue with my fetcher. Here is it:

const fetcher = (url) => { 
axios.get(url)
    .then((response) => {
      console.log(response)
      return response.data.results.json()
    })
    .catch(function (error) {
      let textError = ""
      if (error.response) {
        textError = error.response.data.message
      } else if (error.request) {
        textError = error.request
      } else {
        textError = error.message
      }
      const errorThw = new Error(textError)
      errorThw.message = textError
      errorThw.info = error
      errorThw.status = error.status
      return errorThw
    })
}

The console.log is showing me results, but in the render it's stuck on "loading".

Tks

[huozhi]

if your responseType of axios.get is json, i think response.data should already be the data you need? I wonder if response.data.results.json() might crashes and lead to error. regarding to loading state, you can leverage isValidating return from swr hook.

[crismarucci]

I changed it to response.data and nothing changes. Look at this:

const {data, error} = useSWR("https://pokeapi.co/api/v2/pokemon/", fetcher)

console.log('The data is:')  
console.log(data) //GETTING "UNDEFINED HERE"

if (error) return <Text>Error al obtener los locales disponibles: {error.message}</Text>
if (!data) return <Text>Cargando locales...</Text>

I'm always getting "undefined" in data but not an error. The fetcher is getting the data but it's not being assigned to the "data" of useSWR. I'm sure I'm doing something wrong but I can't figure it out.
Tks.

[huozhi]

I created a demo of blank expo app running on my iOS device, it seems fine working with swr. but my fetcher is without the network requesting.

const states = [
  'Hello',
  'React',
  'Native',
  'With',
  'Swr'
];

function fetcher(key) {
  return Promise.resolve(states[key]);
}

I think you can try to set config.revalidateOnMount to true to let it revalidate once when the component is mounted

[promer94]

const fetcher = (url) => {
// miss return statement here 
return axios.get(url)
    .then((response) => {
      console.log(response)
      return response.data.results.json()
    })
    .catch(function (error) {
      let textError = ""
      if (error.response) {
        textError = error.response.data.message
      } else if (error.request) {
        textError = error.request
      } else {
        textError = error.message
      }
      const errorThw = new Error(textError)
      errorThw.message = textError
      errorThw.info = error
      errorThw.status = error.status
      return errorThw
    })
}

[crismarucci]

I can't believe such a basic mistake. This kind of stupid errors happens to me when I'm using some new library... instead of debug the obvius problem, I lose myself in the new thing I'm trying. Next time: Ockham razor for me. Tks a lot @promer94 , it works now!