I have just wanted to share one cool thing, which was recently announced with the premiere of Apollo Client 3.0 - reactive variables in local state.
I think it will insanely improve developer's experience when implementing local state using Apollo.
Below great example from the docs:
1. Define the query
Create local state variable called cartItems
export const GET_CART_ITEMS = gql`
query GetCartItems {
cartItems @client
}
`;
2. Create reactive variable
export const cartItemsVar = makeVar([]);
3. Define policy for the local state field
Use created reactive variable as the source of cartItems local state field
export const cache = new InMemoryCache({
typePolicies: {
Query: {
fields: {
cartItems: {
read() {
return cartItemsVar();
}
}
}
}
}
});
4. Create component, which will update reactive variable
import { cartItemsVar } from './cache';
// ... other imports
export function AddToCartButton({ productId }) {
const cartItems = cartItemsVar();
return (
<div class="add-to-cart-button">
<Button onClick={() => cartItemsVar([...cartItems, productId])}>
Add to Cart
</Button>
</div>
);
}
5. Create component, which will query for local state field
export const GET_CART_ITEMS = gql`
query GetCartItems {
cartItems @client
}
`;
export function Cart() {
const { data, loading, error } = useQuery(GET_CART_ITEMS);
if (loading) return <Loading />;
if (error) return <p>ERROR: {error.message}</p>;
return (
<div class="cart">
<Header>My Cart</Header>
{data && data.cartItems.length === 0 ? (
<p>No items in your cart</p>
) : (
<Fragment>
{data && data.cartItems.map(productId => (
<CartItem key={productId} />
))}
</Fragment>
)}
</div>
);
}
Summary
After updating the value of reactive variable all queries, which relies on cartItems local state field will be automatically update. That's awesome!
Top comments (0)