Implement `useBackgroundQuery` hook for use with `useFragment` #8783

benjamn · 2021-09-13T15:56:57Z

Building on #8782, this new useBackgroundQuery hook allows a component to fetch data in a way that's managed by the React component lifecycle, without automatically subscribing to every future change in that data, allowing child components to update in place without requiring the parent component to rerender all its children.

In other words, useBackgroundQuery is my best answer so far to this question I raised in #8236 (comment):

[…] there are some remaining questions to answer around who (what code) is responsible for issuing the queries, in this new world of only/mostly fragments.

Reusing useQuery is certainly an option, but then the component gets subscribed to all changes in the query data, when it probably only cares about some small fragment of the query's data. I think a new kind of query hook will be necessary, or perhaps an additional sub-section within the useFragment options.

This API is still in development and is very much subject to change (hence the [WIP] tag). Watch this space for more details and examples in the coming days/week.

brainkim · 2021-09-17T16:40:17Z

src/react/hooks/useBackgroundQuery.ts

@@ -0,0 +1,143 @@
+import { useRef, useEffect } from "react";
+import { unstable_batchedUpdates } from "react-dom";


Does this mean we can’t use useBackgroundQuery in React Native?

Apparently react-native also exports unstable_batchedUpdates, so maybe we can find a way to swap the source module when running in React Native?

brainkim

Interesting work! Some thoughts on the proposed API.

I’m not sure about the use-case of passing an ObservableQuery directly into useBackgroundQuery(). As always, I dislike this sort of polymorphism.
I’m still not clear on the motivation behind using a “higher-order hook” even if it doesn’t break “The Rules of Hooks.” I get that the point of useBackgroundQuery() is so we can have loading, networkStatus, error and data each listened to and cause re-renders individually, but these properties all seem to change in near perfect unison, especially when you use options like notifyOnNetworkStatusChange. I also dislike piping this all through reactive vars because I imagine this will be hard to debug.
I am very worried that this hook’s primary purpose is to coordinate with the useFragment() hook, and yet there doesn’t seem to be any sort of means for ensuring that each useFragment() call is backed by a corresponding useBackgroundQuery() call. I imagine a lot of developers would spend time carefully making sure each fragment was used in a useBackgroundQuery() call. What is the guidance for how these two hooks should be called? Should the useBackgroundQuery() hook be called in a parent component and useFragment() be called in a child component? Does it make sense to call the two hooks from the same component? I wonder if we could be using React contexts for this API.

brainkim · 2022-02-16T00:17:44Z

src/react/hooks/__tests__/useBackgroundQuery.test.tsx

+        useError,
+      } = useBackgroundQuery({
+        query,
+        notifyOnNetworkStatusChange: true,


Is the usage of notifyOnNetworkStatusChange intentional here? It feels like an anti-pattern given the intent of the hook.

brainkim · 2022-02-16T00:32:19Z

src/react/hooks/useBackgroundQuery.ts

+      },
+
+      error(error) {
+        unstable_batchedUpdates(() => {


Do we not have to do the clearing of results stuff during errors that we do in the useQuery() hook?

brainkim · 2022-02-16T00:45:46Z

src/react/hooks/useBackgroundQuery.ts

+    ref.current = isObservableQuery(queryOrOptions)
+      ? internalStateFromObservableQuery(queryOrOptions)
+      : internalStateFromOptions(client, queryOrOptions)
+  );


Nit: all three of these functions could likely be inlined insofar as they’re all only referenced here.

brainkim · 2022-02-16T00:47:44Z

src/react/hooks/useBackgroundQuery.ts

+    ) {
+      observable.setOptions(mergeOptions(
+        observable.options,
+        state.options = queryOrOptions,


This is a sneaky place to update a ref property! It took me a while that we’re assigning it from here.

brainkim · 2022-02-16T00:48:29Z

src/react/hooks/useBackgroundQuery.ts

+
+  useEffect(() => {
+    if (
+      !isObservableQuery(queryOrOptions) &&


Have we thought about the edge case of going from options to ObservableQuery or from ObservableQuery to options?

…Query. This design lets the component selectively depend on ObservableQuery metadata that it cares about, rather than always rerendering the component whenever any item of that metadata has been updated. For example, the useLoading hook uses useReactiveVar to read from result.loadingVar, which is kept in sync with the result.loading properties of any results received by the ObservableQuery. Likewise for useNetworkStatus, useError, and useData, though useData is especially discouraged because it defeats the main purpose of useObservableQuery, which is to avoid rerendering the component tree every time anything triggers a change in result.data. The ObservableQuery itself is now returned as the result.observable property from useObservableQuery, which gives us room to add additional sibling properties in the future.

* Return most recent result diff from useFragment, add test * fix: move test to useFragment.test.tsx * fix: incorporate PR feedback on useFragment test * fix: avoid calling diffToResult twice

alessbell · 2023-02-03T17:38:46Z

useBackgroundQuery appears to be headed in a different direction (see #8694 (comment)).

For that reason, I'm going to close this PR (but keep the branch around). Thanks all!

benjamn added 💡 idea 🛫 in-progress 🧞‍♂️ enhancement 🧪 has-tests ⚛️ React-related 💸 caching labels Sep 13, 2021

benjamn added this to the Release 3.6 milestone Sep 13, 2021

benjamn self-assigned this Sep 13, 2021

benjamn linked an issue Sep 13, 2021 that may be closed by this pull request

Feature: useBackgroundQuery hook #8694

Closed

benjamn added discussion 🙏 help-wanted labels Sep 13, 2021

hwillson added 2021-10 and removed 2021-09 labels Sep 14, 2021

brainkim reviewed Sep 17, 2021

View reviewed changes

benjamn force-pushed the useFragment-hook branch from cd14628 to 92b140a Compare September 17, 2021 18:34

benjamn force-pushed the useBackgroundQuery-hook branch 2 times, most recently from 6f29ce6 to b71544e Compare September 17, 2021 18:42

benjamn force-pushed the useFragment-hook branch from 65dcb4c to 61f1edf Compare September 27, 2021 16:45

benjamn force-pushed the useBackgroundQuery-hook branch from b71544e to dc6a185 Compare September 27, 2021 16:50

benjamn force-pushed the useFragment-hook branch from 61f1edf to 8668f9f Compare October 4, 2021 19:17

benjamn force-pushed the useBackgroundQuery-hook branch from dc6a185 to 648755a Compare October 4, 2021 19:19

benjamn force-pushed the useFragment-hook branch from 8668f9f to 1111b8e Compare October 4, 2021 19:20

benjamn force-pushed the useBackgroundQuery-hook branch from 648755a to c52b6b4 Compare October 4, 2021 19:21

benjamn force-pushed the useFragment-hook branch from 1111b8e to 0a629c1 Compare October 4, 2021 22:41

benjamn force-pushed the useBackgroundQuery-hook branch from c52b6b4 to b113d18 Compare October 4, 2021 22:42

benjamn force-pushed the useFragment-hook branch from 0a629c1 to 8f02de3 Compare October 29, 2021 18:01

benjamn force-pushed the useBackgroundQuery-hook branch from b113d18 to 4ca8fa4 Compare October 29, 2021 18:05

hwillson added the 2021-11 label Nov 1, 2021

benjamn force-pushed the useFragment-hook branch 4 times, most recently from 1e20e8f to b2a2a1d Compare February 4, 2022 17:51

benjamn force-pushed the useBackgroundQuery-hook branch from 3fd2d85 to 1763918 Compare February 4, 2022 18:00

benjamn changed the title ~~[WIP] Implement useBackgroundQuery hook~~ Implement useBackgroundQuery hook for use with useFragment Feb 4, 2022

brainkim reviewed Feb 16, 2022

View reviewed changes

This was referenced Feb 25, 2022

Refactor useQuery using InternalState class to simplify reasoning about state #9459

Merged

Implement minimal useFragment hook #8782

Merged

benjamn modified the milestones: Release 3.6, Release 3.7 Apr 6, 2022

jpvajda mentioned this pull request Apr 26, 2022

Feature: useBackgroundQuery hook #8694

Closed

benjamn force-pushed the useFragment-hook branch from b2a2a1d to 1e37053 Compare May 25, 2022 17:46

Base automatically changed from useFragment-hook to release-3.7 May 25, 2022 17:57

benjamn force-pushed the useBackgroundQuery-hook branch from 1763918 to 1f44a4f Compare May 25, 2022 18:05

benjamn added 7 commits July 18, 2022 16:39

Implement useObservableQuery hook.

379c160

Batch reactive variable updates to minimize rerendering.

1908b6d

Test that useObservableQuery works as replacement for useQuery.

2d055ee

Export useObservableQuery from @apollo/client/react.

f961d15

Rename useObservableQuery to useBackgroundQuery.

a3c4f53

Bump bundlesize limit to 30.3kB (now 30.25kB).

d06b707

benjamn force-pushed the useBackgroundQuery-hook branch from 1f44a4f to d06b707 Compare July 18, 2022 20:46

Return most recent result diff from useFragment, update test (#9918)

b5ae3e5

* Return most recent result diff from useFragment, add test * fix: move test to useFragment.test.tsx * fix: incorporate PR feedback on useFragment test * fix: avoid calling diffToResult twice

jpvajda modified the milestones: Release 3.7, Release 3.8 Jul 26, 2022

alessbell closed this Feb 3, 2023

benjamn mentioned this pull request Apr 4, 2023

Implement a @nonreactive directive for selectively skipping reactive comparisons of query result subtrees #10722

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement `useBackgroundQuery` hook for use with `useFragment` #8783

Implement `useBackgroundQuery` hook for use with `useFragment` #8783

benjamn commented Sep 13, 2021

brainkim Sep 17, 2021

benjamn Sep 17, 2021

brainkim left a comment

brainkim Feb 16, 2022

brainkim Feb 16, 2022 •

edited

Loading

brainkim Feb 16, 2022 •

edited

Loading

brainkim Feb 16, 2022

brainkim Feb 16, 2022

alessbell commented Feb 3, 2023

		@@ -0,0 +1,143 @@
		import { useRef, useEffect } from "react";
		import { unstable_batchedUpdates } from "react-dom";

Implement useBackgroundQuery hook for use with useFragment #8783

Implement useBackgroundQuery hook for use with useFragment #8783

Conversation

benjamn commented Sep 13, 2021

brainkim Sep 17, 2021

Choose a reason for hiding this comment

benjamn Sep 17, 2021

Choose a reason for hiding this comment

brainkim left a comment

Choose a reason for hiding this comment

brainkim Feb 16, 2022

Choose a reason for hiding this comment

brainkim Feb 16, 2022 • edited Loading

Choose a reason for hiding this comment

brainkim Feb 16, 2022 • edited Loading

Choose a reason for hiding this comment

brainkim Feb 16, 2022

Choose a reason for hiding this comment

brainkim Feb 16, 2022

Choose a reason for hiding this comment

alessbell commented Feb 3, 2023

Implement `useBackgroundQuery` hook for use with `useFragment` #8783

Implement `useBackgroundQuery` hook for use with `useFragment` #8783

brainkim Feb 16, 2022 •

edited

Loading

brainkim Feb 16, 2022 •

edited

Loading