Multi-valued argument in the array key for a dependent fetch

[kevinmichaelchen]

I have an app that has two entities: Widget and User. Every Widget belongs to a User. A User can have many Widgets.

I'm making a call to fetch a paginated list of Widgets which is all well and good.

const { data: widgets } = useSWR("/api/widgets", fetchWidgets, {suspense: true})

But then, to fetch the users, I'm doing something which seems sub-optimal (since I'm losing out on de-duping and caching benefits):

const fetchUsers = async (keyName, userIDs) => {
  // logic to fetch users
}

const userIDs = widgets.map(w => w.userID)

const { data: users } = useSWR(
  // the key
  ["/api/users", userIDs], 

  // the fetcher
  fetchUsers,

  // SWR options
  {suspense: true},
)

We can run into duplicates if there are multiple Widgets created by the same User in our paginated list. It's easy enough to solve with a Set, but I'm wondering if there's a better way.

Regarding caching, the above isn't great either. We're caching [1,2,3], but not [1,2] or [3,2,1].

What I'd like is to have a hook per User in order to cache each individual entity.

[kevinmichaelchen]

So the solution I'm going with for now is:

• sort the IDs and de-dupe with a Set
• create a back-end endpoint to support batch lookups (e.g., GetUsers)

[sergiodxa]

I suppose you have a Widget component? You could do something like this:

function WidgetList() {
  const { data: widgetList } = useWidgetList() // this fetch the list of widgets using SWR
  return widgetList.map(widget => <Widget key={widget.id} {...widget} />)
}

function Widget({ userId, ...props }) {
  const { data: user } = useUser(userId) // this fetch the user using SWR
  return <WidgetUI user={user} widget={props} />
}

This way, each widget fetches the user assigned to it, if two widgets share the same author because the user ID will be the same then SWR will dedupe the request and only fetch that user one time.

[kevinmichaelchen]

@sergiodxa Thanks for the reply! This approach looks great!

For some reason I thought I had to co-locate all side effects for remote data fetching in the parent component to prevent flickering while data loads, but I don't: a Suspense boundary ensures data loads completely before anything gets rendered.

Thanks again!

[sergiodxa]

Yeah, I think one good practice with SWR is to colocate data requirements as near as possible to the component, because SWR will dedupe the requests you can render N number of components requiring the same data and only one request will be fired.