SWR options don't seem to work with a helper function?

[corysimmons]

Here's the helper function's general (all the junk removed) signature.

const useGET = (url, options = {
  axiosOptions: {},
  swrOptions: {
	revalidateOnFocus: false,
  }
}) => {
  useSWR(url, x => fetcher(x, axiosOptions), swrOptions)
}

And my usage:

import useGET from 'utils/useGET'

export default () => {
  const { data: foo } = useGET('some-api.com/foo') // revalidates on focus... :(
  const { data: bar } = useGET('some-api.com/bar', { swrOptions: { revalidateOnFocus: false } }) // works! it doesn't revalidate on focus!?

  return <h1>RIP</h1>
}

What am I doing wrong here? It seems like I'm passing 3 arguments to useSWR (url/key, fetcher, and options) regardless of if I do it while I'm declaring useGET (kinda globally because I don't want to use the <SWRConfig> thing) or if they are set on a per-use basis...

Would appreciate any help. I feel like I'm just doing some basic JS stuff wrong and this isn't SWR's fault.

Here's the entire helper function:

// useGET.js
import axios from 'axios'
import useSWR from 'swr'

import globalStore from 'utils/globalStore' // https://npm.im/easy-peasy

async function fetcher(...args) {
    const res = await axios(...args)
    return res.data
}

export default function (
    url,
    options = {
        dependencies: [], // Anything needed to construct a dynamic URL. e.g. [selected.userId]
        axiosOptions: {},
        swrOptions: {
            revalidateOnFocus: false, // ‼️ Keeps revalidating everything on focus ‼️
        },
    },
) {
    const { bearerToken } = globalStore.getState()
    const { dependencies, axiosOptions, swrOptions } = options

    if (bearerToken) {
        axiosOptions.headers = axiosOptions.headers || {}
        axiosOptions.headers.authorization = `Bearer ${bearerToken}`
    }

    if (bearerToken && dependencies?.length) {
        return useSWR(
            dependencies.every(
                x => (typeof x === 'string' || typeof x === 'number') && !!x.trim(),
            ) && [url, bearerToken],
            x => fetcher(x, axiosOptions),
            swrOptions,
        )
    }

    return useSWR(bearerToken && [url, bearerToken], x => fetcher(x, axiosOptions), swrOptions)
}

[sergiodxa]

Could you provide a runnable example, a CodeSandbox, so it's easy to try it?

[corysimmons]

Hey @sergiodxa

I made a reduced demo. It seems to work as expected... 🤦

https://codesandbox.io/s/silent-darkness-3nm6g?file=/src/App.js

I think my problem is I'm not spreading my original options... Like forgetting to spread state in one of those reducer {...state, somethingNew: 123} problems.

I'll go back to the drawing board. Sorry for wasting your time, thanks for the reply and cool libraries!

[corysimmons]

Can confirm. It was just me not merging default options with fresh options. Sorry again!

If you're interested, that helper function is pretty dope. Optimistic UI updates look kinda like this:

// ! pseudo code
import update from 'utils/update' // easy-peasy + _.set to easily update deeply nested state

const newLastName = 'Smith'
const {data, mutate} = useGET('some-api.com/users/123')

return (
	<>
		<pre>{JSON.stringify(data, null, 2)}</pre>
		
		// stole this pattern from your optimistic immer example <3
		<button onClick={async () => {
		  mutate(update('user.name.last', newLastName))
		  mutate(await axios.put('some-api.com/users/123', { lastName: newLastName }))
		}}>
		  update user's last name
		</button>
	</>
)