Best practices: reading a dynamic number of fragments

Client SDKs
1

Imagine a scenario where you have a list of GraphQL IDs–perhaps stored in the variables of a useQuery call–and you want to read fields of theirs for use in business logic.

If you’re just displaying those fields, you could write a component with a useFragment call to read out those fields. But what do you do if you have business logic that requires you to read all those fields in the same scope? useFragment is no longer an option as changes to the list of IDs would break the rules of hooks. client.readFragment is an option, but it’s not reactive.

What tool should I reach for in this scenario?

2

@tpict what version of Apollo Client are you using? useFragment uses client.watchFragment under the hood, so you could potentially use this directly to get the same reactivity as useFragment but without the hook. client.watchFragment was added in 3.10.0.

3

@jerelmiller 3.11.10 so I have that available. It looks like it wouldn’t be a huge lift to implement a useFragments hook that accepts multiple from identifiers? Something like

const results: Partial<Record<string, ExampleFragment>> = useFragments({
  document: ExampleFragmentDocument,
  from: [id1, id2],
})

const { data, complete } = results[id1];
4

@tpict that is definitely something we want to add and has been asked a couple times. We’ve been busy with Apollo Client 4.0 so we haven’t focused on adding this, but it definitely should be possible. We are planning to do some more work with fragments in 4.x, especially as it relates to @defer. We will be looking at this closer at that time so that we can design the API in a way that will be compatible with the more robust feature set when we get there.

If you want something in the mean time, feel free to copy the implementation of useFragment for and modify it to handle multiple from values!