Fetcher obtains data, but data and error are undefined

Love the simplicity of this library. I’m having some trouble in the handoff of the data from the fetcher to useSWR.

My setup

• Typescript
• NextJS
• Fetcher - GraphQL Client (fetch.ts)

require("fetch-cookie/node-fetch")(require("node-fetch"))
export default async function(query, variables, token) {
  const data = await graphql.request(query, variables)
  console.log("fetch.ts ", data)
  return data
}

• SWRConfig

<SWRConfig value={{ fetcher: (query, variables, token) => fetch(query, variables, token) }}>

<SWRConfig value={{ fetcher: (query, variables, token) => fetch(query, variables, token).then(res => console.log(res)) }}>

Both setups return valid data.

• useSWR

const { data, error } = useSWR<DataQueryType>([GraphQLQuery, props, token])

Data and error remains undefined despite the fetch response being successful on the server and fetch client.

Refreshing the page doesn’t appear to help either. It seems like the useSWR isn’t passing the result to the data object.

Happy to gather additional logs/details.

[shuding]

Hi @jasonlor! I forked your sandbox and fixed the issue: https://codesandbox.io/s/beautiful-thunder-7lylp

There’re 2 problems, one is that you shouldn’t pass {} to useSWR’s args:

useSWR([query, {}, "bleh"])

Because SWR shallowly compares those args, just like the deps array in useEffect (explained here: https://github.com/zeit/swr#multiple-arguments).

And the other one is the extra .data here:

{data.data.country.name}

Hope that helps!

[shuding]

Let me know if you have other questions 🙏