From 6c4259b913eeb7732f1aedb842f218a47f63a954 Mon Sep 17 00:00:00 2001 From: "John P. Vajda" Date: Fri, 24 Jun 2022 11:56:31 -0600 Subject: [PATCH 1/5] emptye From ea846a67177f7522971ead219a26e81d02759bce Mon Sep 17 00:00:00 2001 From: "John P. Vajda" Date: Fri, 15 Jul 2022 16:47:29 -0600 Subject: [PATCH 2/5] adding content on useReactiveVar --- .../source/local-state/reactive-variables.mdx | 28 ++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/docs/source/local-state/reactive-variables.mdx b/docs/source/local-state/reactive-variables.mdx index 269c784b84c..ec5fa1dcb55 100644 --- a/docs/source/local-state/reactive-variables.mdx +++ b/docs/source/local-state/reactive-variables.mdx @@ -9,6 +9,32 @@ New in Apollo Client 3, **reactive variables** are a useful mechanism for repres > A query "depends on" a reactive variable if any of the query's requested fields defines a [`read` function](../caching/cache-field-behavior/#the-read-function) that reads the variable's value. +## useReactiveVar hook + +The `useReactiveVar` hook can be used to read from a reactive variable in a way that allows the React component to rerender if/when the variable is next updated. + +Previously, the only way for a reactive variable to trigger a React component rerender was through the use of `useQuery`. Now you don't have to be using `useQuery` to benefit from the reactivity that `ReactiveVar` provides. + +Implementing `useReactiveVar` required generalizing the `ReactiveVar` API to allow arbitrary listeners (not just InMemoryCache objects) like so: + +```tsx +import { ReactiveVar, makeVar } from "@apollo/client"; + +const todosInitialValue: Todos = [ + { + id: 0, + completed: false, + text: "Use Apollo Client 3" + } +] + +export const todosVar: ReactiveVar = makeVar( + todosInitialValue +); + +``` + + ## Creating Create a reactive variable with the `makeVar` method, like so: @@ -19,7 +45,7 @@ import { makeVar } from '@apollo/client'; const cartItemsVar = makeVar([]); ``` -This code creates a reactive variable with an empty array as its initial value. +This code creates a reactive variable with an empty array as its initial value. > **Important:** The return value of `makeVar` is a _function_ that you call to read or modify your reactive variable's value. From fa2bdd553566bee0a72cedfd17e3cb86b7d3af01 Mon Sep 17 00:00:00 2001 From: "John P. Vajda" Date: Mon, 18 Jul 2022 12:51:00 -0600 Subject: [PATCH 3/5] added to react-hooks section --- docs/source/api/react/hooks.mdx | 35 +++++++++++++++ .../source/local-state/reactive-variables.mdx | 43 ++++++++----------- 2 files changed, 52 insertions(+), 26 deletions(-) diff --git a/docs/source/api/react/hooks.mdx b/docs/source/api/react/hooks.mdx index 91a1af2a85c..476b0885efc 100644 --- a/docs/source/api/react/hooks.mdx +++ b/docs/source/api/react/hooks.mdx @@ -326,3 +326,38 @@ function useApolloClient(): ApolloClient {} | Param | Type | Description | | ---------------------- | -------------------------- | ---------------------------------------------------------- | | Apollo Client instance | ApolloClient<object> | The `ApolloClient` instance being used by the application. | + + +## useReactiveVar + +The `useReactiveVar` hook can be used to read from a reactive variable in a way that allows the React component to rerender if/when the variable is next updated. + +Previously, the only way for a reactive variable to trigger a React component rerender was through the use of `useQuery`. Now you don't have to be using `useQuery` to benefit from the reactivity that `ReactiveVar` provides. + +### Example +```tsx +import { makeVar, useReactiveVar } from "@apollo/client"; +export const cartItemsVar = makeVar([]); + +export function Cart() { + const cartItems = useReactiveVar(cartItemsVar); + // ... +``` + +### Function Signature + +```tsx + function useReactiveVar(rv: ReactiveVar): T { + const value = rv(); + // We don't actually care what useState thinks the value of the variable + // is, so we take only the update function from the returned array. + const mute = rv.onNextChange(useState(value)[1]); + // Once the component is unmounted, ignore future updates. Note that the + // useEffect function returns the mute function without calling it, + // allowing it to be called when the component unmounts. This is + // equivalent to useEffect(() => () => mute(), []), but shorter. + useEffect(() => mute, []); + return value; +} + +``` \ No newline at end of file diff --git a/docs/source/local-state/reactive-variables.mdx b/docs/source/local-state/reactive-variables.mdx index ec5fa1dcb55..89977e3b3f8 100644 --- a/docs/source/local-state/reactive-variables.mdx +++ b/docs/source/local-state/reactive-variables.mdx @@ -9,32 +9,6 @@ New in Apollo Client 3, **reactive variables** are a useful mechanism for repres > A query "depends on" a reactive variable if any of the query's requested fields defines a [`read` function](../caching/cache-field-behavior/#the-read-function) that reads the variable's value. -## useReactiveVar hook - -The `useReactiveVar` hook can be used to read from a reactive variable in a way that allows the React component to rerender if/when the variable is next updated. - -Previously, the only way for a reactive variable to trigger a React component rerender was through the use of `useQuery`. Now you don't have to be using `useQuery` to benefit from the reactivity that `ReactiveVar` provides. - -Implementing `useReactiveVar` required generalizing the `ReactiveVar` API to allow arbitrary listeners (not just InMemoryCache objects) like so: - -```tsx -import { ReactiveVar, makeVar } from "@apollo/client"; - -const todosInitialValue: Todos = [ - { - id: 0, - completed: false, - text: "Use Apollo Client 3" - } -] - -export const todosVar: ReactiveVar = makeVar( - todosInitialValue -); - -``` - - ## Creating Create a reactive variable with the `makeVar` method, like so: @@ -86,6 +60,23 @@ With the `useReactiveVar` hook, React components can also include reactive varia For more information, see [Storing local state in reactive variables](./managing-state-with-field-policies/#storing-local-state-in-reactive-variables). +### useReactiveVar hook + +The `useReactiveVar` hook can be used to read from a reactive variable in a way that allows the React component to rerender if/when the variable is next updated. + +Previously, the only way for a reactive variable to trigger a React component rerender was through the use of `useQuery`. Now you don't have to be using `useQuery` to benefit from the reactivity that `ReactiveVar` provides. + +```tsx +import { makeVar, useReactiveVar } from "@apollo/client"; +export const cartItemsVar = makeVar([]); + +export function Cart() { + const cartItems = useReactiveVar(cartItemsVar); + // ... +``` + ## Example application [This example to-do list application](https://github.com/apollographql/ac3-state-management-examples/tree/master/apollo-local-state) uses reactive variables to track both the current list of to-do items and the filter that determines which items to display. See [`cache.tsx`](https://github.com/apollographql/ac3-state-management-examples/blob/master/apollo-local-state/src/cache.tsx) in particular. + + From 1ce77d2ecc78748a79b2abbfe3369e1aca0dbe06 Mon Sep 17 00:00:00 2001 From: "John P. Vajda" Date: Tue, 19 Jul 2022 15:03:21 -0600 Subject: [PATCH 4/5] resolved feedback --- docs/source/api/react/hooks.mdx | 3 ++- docs/source/local-state/reactive-variables.mdx | 8 +++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/docs/source/api/react/hooks.mdx b/docs/source/api/react/hooks.mdx index 476b0885efc..85e8a591db7 100644 --- a/docs/source/api/react/hooks.mdx +++ b/docs/source/api/react/hooks.mdx @@ -330,11 +330,12 @@ function useApolloClient(): ApolloClient {} ## useReactiveVar -The `useReactiveVar` hook can be used to read from a reactive variable in a way that allows the React component to rerender if/when the variable is next updated. +The `useReactiveVar` hook can be used to read from a reactive variable in a way that allows the React component to re-render if/when the variable is next updated. Previously, the only way for a reactive variable to trigger a React component rerender was through the use of `useQuery`. Now you don't have to be using `useQuery` to benefit from the reactivity that `ReactiveVar` provides. ### Example + ```tsx import { makeVar, useReactiveVar } from "@apollo/client"; export const cartItemsVar = makeVar([]); diff --git a/docs/source/local-state/reactive-variables.mdx b/docs/source/local-state/reactive-variables.mdx index 89977e3b3f8..596df3eefc6 100644 --- a/docs/source/local-state/reactive-variables.mdx +++ b/docs/source/local-state/reactive-variables.mdx @@ -62,9 +62,9 @@ For more information, see [Storing local state in reactive variables](./managing ### useReactiveVar hook -The `useReactiveVar` hook can be used to read from a reactive variable in a way that allows the React component to rerender if/when the variable is next updated. +The `useReactiveVar` hook can be used to read from a reactive variable in a way that allows the React component to re-render if/when the variable is next updated. -Previously, the only way for a reactive variable to trigger a React component rerender was through the use of `useQuery`. Now you don't have to be using `useQuery` to benefit from the reactivity that `ReactiveVar` provides. +Previously, the only way for a reactive variable to trigger a React component re-render was through the use of `useQuery`. Now you don't have to be using `useQuery` to benefit from the reactivity that `ReactiveVar` provides. ```tsx import { makeVar, useReactiveVar } from "@apollo/client"; @@ -77,6 +77,4 @@ export function Cart() { ## Example application -[This example to-do list application](https://github.com/apollographql/ac3-state-management-examples/tree/master/apollo-local-state) uses reactive variables to track both the current list of to-do items and the filter that determines which items to display. See [`cache.tsx`](https://github.com/apollographql/ac3-state-management-examples/blob/master/apollo-local-state/src/cache.tsx) in particular. - - +[This example to-do list application](https://github.com/apollographql/ac3-state-management-examples/tree/master/apollo-local-state) uses reactive variables to track both the current list of to-do items and the filter that determines which items to display. See [`cache.tsx`](https://github.com/apollographql/ac3-state-management-examples/blob/master/apollo-local-state/src/cache.tsx) in particular. \ No newline at end of file From ec9dedd919aaec50fc417fc1a94e96be1d706c0c Mon Sep 17 00:00:00 2001 From: "John P. Vajda" Date: Tue, 19 Jul 2022 15:11:34 -0600 Subject: [PATCH 5/5] fixed function signature --- docs/source/api/react/hooks.mdx | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/docs/source/api/react/hooks.mdx b/docs/source/api/react/hooks.mdx index 85e8a591db7..5005194a10e 100644 --- a/docs/source/api/react/hooks.mdx +++ b/docs/source/api/react/hooks.mdx @@ -348,17 +348,5 @@ export function Cart() { ### Function Signature ```tsx - function useReactiveVar(rv: ReactiveVar): T { - const value = rv(); - // We don't actually care what useState thinks the value of the variable - // is, so we take only the update function from the returned array. - const mute = rv.onNextChange(useState(value)[1]); - // Once the component is unmounted, ignore future updates. Note that the - // useEffect function returns the mute function without calling it, - // allowing it to be called when the component unmounts. This is - // equivalent to useEffect(() => () => mute(), []), but shorter. - useEffect(() => mute, []); - return value; -} - +function useReactiveVar(rv: ReactiveVar): T {} ``` \ No newline at end of file