How to populate cache before setting data?

[ManuLpz4]

Hey guys, how is it going? Hope you are doing well :)

At @Plaude, we are using SWR to fetch conversations, and to avoid fetching every user and message related in different requests we get everything in an object and then call mutate to populate the cache.

Example:

 const { data, ... } = useSWRInfinite<GetConversationsResponse>(getKey, fetcher, {
    onSuccess: ([{ users }]) => {
      for (const user of users) {
        mutate(`/api/users/${user.id}`, user, false)
      }
    }
  })

The issues comes because when we mutate, the data is already set so the useUser hook hits the API before the cache gets populated.

Did you find any elegant solution to this? Maybe the onSuccess could be async and wait to set the data

[ManuLpz4]

Just to update on it, I moved the first fetch server-side so now is something like this, but I don't think it is its final form.

import { SWRConfig, unstable_serialize } from 'swr'
import { unstable_serialize as infinite_unstable_serialize } from 'swr/infinite'

import { getInboxData } from '@/db/queries'
import type { Team } from '@/db/schema/teams'
import { getConversationsKey, getMessagesKey, getUserKey } from '@/lib/swr'

type InboxDataProviderProps = React.PropsWithChildren<{
  team: Team
}>

export default async function InboxDataProvider({
  team,
  children
}: InboxDataProviderProps) {
  const { users, messages, ...conversations } = await getInboxData({
    teamId: team.id,
    limit: 20,
    ascending: false
  })
  const fallback = {
    [infinite_unstable_serialize(() =>
      getConversationsKey(0, null, team.id, 20, 'desc')
    )]: [conversations],
    ...Object.fromEntries(
      users.map(user => [unstable_serialize(getUserKey(user.id)), user])
    ),
    ...Object.fromEntries(
      messages.map(message => [
        unstable_serialize(getMessagesKey(message.conversationId)),
        [message]
      ])
    )
  }

  return <SWRConfig value={{ fallback }}>{children}</SWRConfig>
}