Multiple Arguments with object in render breaks cache

Hi,

It seems that multiple arguments with object in render breaks cache :

// Make sure objects are stable
const params = useMemo(() => ({ id }), [id])
useSWR(['/api/user', params], query)

If you follow this use case : id = 1 --> id = 2 --> id = 1 The second id = 1 doesn’t have the same key in cache as the first (because params doesn’t have the same ref)

Reproductible codesandbox : https://codesandbox.io/s/swr-multiple-arguments-no-cache-mfssd

The only way I found to preserve cache is to stringify in memo and parse in fetcher (https://codesandbox.io/s/swr-multiple-arguments-cache-p8iwy)

const params = useMemo(() => JSON.stringify({ id }), [id])

any better idea ?

Thanks !

[shuding]

🎉 Added support for key serialization in #1429 and released as 1.1.0-beta.0, you don’t need useMemo anymore. CC: @nandorojo

[shuding]

Yes this is indeed a problem. In our real world use cases, we’re using it like this:

const { data: user } = useSWR('/api/user', fetch)
const { data: userItems } = useSWR(['/api/items', user], fetchWithUser)

Because user is a globally shared object, the cache key of the second query will always be stable. For use cases like query params, I will still suggest passing primitive values as args directly (will update documentation as well):

useSWR(['/api/user', id], (url, id) => query(url, { id }))

We have some discussions here https://github.com/zeit/swr/pull/145#discussion_r350064725.