import { InMemoryCache, makeVar } from '@apollo/client';
const cache = new InMemoryCache({
typePolicies: {
Query: {
fields: {
readNumOfOutofStockItems: {
read(cart, { readField }) {
const { products } = readField('cart')?.data ?? [];
const items = products.filter(product =>
product.isOutOfStock);
return items.length;
}
}
}
}
}
const client = new ApolloClient({ cache });
import React from 'react';
import { gql, useQuery } from '@apollo/client';
const GET_OOS_ITEMS_QUERY = gql`
query GetOutOfStockItems {
readNumOfOutofStockItems @client
}
`;
const ViewOutOfStockItems = () => {
const { loading, data, error } = useQuery(GET_OOS_ITEMS_QUERY);
return (<div>{data?.products.map(product =>
<p>{data.readNumOfOutofStockItems}</p>
</div>);
}