diff --git a/.changeset/thirty-ties-arrive.md b/.changeset/thirty-ties-arrive.md new file mode 100644 index 00000000000..d9695eb0900 --- /dev/null +++ b/.changeset/thirty-ties-arrive.md @@ -0,0 +1,24 @@ +--- +"@apollo/client": minor +--- + +Introduces a new `useLoadableQuery` hook. This hook works similarly to `useBackgroundQuery` in that it returns a `queryRef` that can be used to suspend a component via the `useReadQuery` hook. It provides a more ergonomic way to load the query during a user interaction (for example when wanting to preload some data) that would otherwise be clunky with `useBackgroundQuery`. + +```tsx +function App() { + const [queryRef, loadQuery, { refetch, fetchMore }] = useLoadableQuery(query, options) + + return ( + <> + + {queryRef && } + + ); +} + +function Child({ queryRef }) { + const { data } = useReadQuery(queryRef) + + // ... +} +```