diff --git a/docs/source/api/react/hooks.mdx b/docs/source/api/react/hooks.mdx index 91a1af2a85c..5005194a10e 100644 --- a/docs/source/api/react/hooks.mdx +++ b/docs/source/api/react/hooks.mdx @@ -326,3 +326,27 @@ 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 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([]); + +export function Cart() { + const cartItems = useReactiveVar(cartItemsVar); + // ... +``` + +### Function Signature + +```tsx +function useReactiveVar(rv: ReactiveVar): T {} +``` \ 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 269c784b84c..596df3eefc6 100644 --- a/docs/source/local-state/reactive-variables.mdx +++ b/docs/source/local-state/reactive-variables.mdx @@ -19,7 +19,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. @@ -60,6 +60,21 @@ 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 re-render if/when the variable is next updated. + +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"; +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. +[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