Args as key

[shuding]

This is a simple and efficient implementation of a frequently requested feature.

Currently if you want to pass outside args to fetcher (which may change during the lifecycle):

useSWR('key', () => fetcher(...args))

It doesn't work, because the cache is indexed by the key. Which means if your args change, a SWR refetch will not be triggered.

Use Cases

GraphQL:

const personQuery = `
  query Person(id: ID, name: String) {
    person(id: $id, name: $name) {
      id
    }
  }
`

// Reuse same query with different variables.
request(personQuery, { variables: { id: 42 } })
request(personQuery, { variables: { name: "Alice" } })

Multiple params:

const token = useToken()

// SWR will still read the stale data even if `token` changes
const { data } = useSWR('/api/user', url => fetchAPI(url, token))

New API

This implementation doesn't break any existing API or behavior, but allows you to use an array as the key param:

useSWR([...args], fetcher, options)

And arg can be any value, object or even function. SWR will use those args as the key of the cache, and pass them as arguments to fetcher:

fetcher(...args)

Notes

Same as React Hook deps, don't pass anonymous objects/arrays/functions, e.g.:

const x = props.x

// this is wrong, because deps are compared shallowly (===)
useSWR(['hello', {value: x}], fetcher) 

// you can use useMemo
const v = useMemo(() => ({value: x}), [x])
useSWR(['hello', v], fetcher)

// or handle the logic inside fetcher
useSWR(['hello', x], (str, v) => fetcher(str, { value: v }))

Related: #37, #93.
Closes #40, closes #23.

[cryptiklemur]

Closes #37 , would re-implement type-fixes in a separate PR

[pacocoursey]

Had no idea WeakMap had a good use case before today. Looks good!