Я просто хотел поделиться одной замечательной вещью, о которой недавно было объявлено во время премьеры Apollo Client 3.0 - реактивные переменные в локальном состоянии.
Я думаю, что это безумно улучшит опыт разработчика при реализации локального состояния с помощью Apollo.
Ниже отличный пример из документов:
1. Определите запрос.
Создайте локальную переменную состояния под названием cartItems.
export const GET_CART_ITEMS = gql`
query GetCartItems {
cartItems @client
}
`;
2. Создайте реактивную переменную.
export const cartItemsVar = makeVar([]);
3. Определите политику для поля местного государства.
Использовать созданную реактивную переменную в качестве источника поля местного состояния cartItems
export const cache = new InMemoryCache({
typePolicies: {
Query: {
fields: {
cartItems: {
read() {
return cartItemsVar();
}
}
}
}
}
});
4. Создайте компонент, который обновит реактивную переменную.
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. Создайте компонент, который будет запрашивать поле локального состояния.
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> ); }
Резюме
После обновления значения реактивной переменной все запросы, основанные на поле локального состояния cartItems, будут обновлены автоматически. Это потрясающе!