Adding new 'args' config

[cryptiklemur]

Adds the ability to pass arguments to the fetcher function

• Updated documentation
• Added example
• Added test

Looking for more examples to show off the possibilities for this

[Timer]

Thanks for the PR! I'm only rejecting because we'd like to have a bit more discussion before this is landed.

Namely, we need to add fn and its args to the internal dependencies array of the hook.

Secondly, we should figure out and document how to enable the ESLint rule to enable exhaustive deps for this hook.
☝️ to make this work we might need args to be an actual array passed, not part of the options, e.g.

useSWR('token', () => document.cookie(...), [])
useSWR('token', () => document.cookie(...), [], { ...opts })

[Timer]

What we're trying to achieve would be a syntax sugar way of doing this:

const fn = useCallback(
  key => {
    doSomething(key, a, b);
  },
  [a, b],
);
const { data, error } = useSWR('my-key', fn);

(where key & fn are a part of the internal dependency arrays)

[cryptiklemur]

Hi @Timer, I had an offline conversation with @quietshu about this in slack, and we landed on this "API." That being said, if we want to change it up, I'm all ears!

I can add the deps, that's an easy change.

[cryptiklemur]

Hm. that changed caused an infinite loop in the tests...

[cryptiklemur]

Updated to the new suggested format:

function useSWR<Data = any, Error = any, Fn extends fetcherFn<Data> = fetcherFn<Data>>(key: keyInterface, fn?: Fn, config?: ConfigInterface<Data, Error>): responseInterface<Data, Error>;
function useSWR<Data = any, Error = any, Fn extends fetcherFn<Data> = fetcherFn<Data>>(key: keyInterface, fn?: Fn, deps?: Parameters<Fn>, config?: ConfigInterface<Data, Error>): responseInterface<Data, Error>;

// typeless
function useSWR(key, fn?, config?);
function useSWR(key, fn?, deps?, config?);

Still getting an infinite loop...

I do have a concern here, in that we can't pass a function that returns deps for this, not allowing: https://swr.now.sh/#dependent-fetching. I'd love to find a way to allow this while still working with the eslint plugin. Any suggestions?

e.g.

const {data: user} = useSWR('user', api.getUser, [userId]);
const {data} = useSWR(`${userId} tweets`, twitterApi.getTweets, [user.twitterHandle]); // Errors because user is undefined

// Would like to do 
const {data} = useSWR(`${userId} tweets`, twitterApi.getTweets, () => [user.twitterHandle]);

[clentfort]

The react team recommends against having a custom deps as the lint-rule will not pick these up automatically. https://twitter.com/dan_abramov/status/1140316424898043904 The recommended way is to pass in a function wrapped via useMemo or useCallback.

[clentfort]

deps being not the last argument is a very surprising API-design since the deps array is usually the last parameter, at least for the react in-built hooks.

[cryptiklemur]

This isnt a "custom" deps. Its just an array. Parameters is a typescript type to put the arguments of a function in a tuple. Misunderstood. We are specifically trying to provide syntactic sugar against using useMemo or useCallback, as thats a very unfriendly developer pattern

the eslint plugin for exhaustive deps is expecitng deps to be immediately after the function. Hands may be tied here for that

[shuding]

I do have a concern here, in that we can't pass a function that returns deps for this, not allowing: https://swr.now.sh/#dependent-fetching. I'd love to find a way to allow this while still working with the eslint plugin. Any suggestions?

I think we should still include deps inside the key function e.g.:

useSWR(() => dep ? 'key' : throwOrNull, () => fetch(dep.id), [dep])

[shuding]

Found some bugs regarding the changes.

I removed fnRef since fn is not a dependency (but those args are).
And also, I added depsCompare to compare 2 arrays (directly using === will lead to false because [ ] will be a new created object every time when rendering).