Как запросить локальное состояние GraphQL, чтобы получить все объекты с определенным значением для переменной @client из вложенной структуры

Question

Ниже приведен запрос, который выбирает список продуктов и сохраняет его в локальном кэше apollo-client. Он получает список products и список images для каждого продукта

const GET_PRODUCTS_QUERY = gql`
  query Products($cursor: String, $query: String, $imageCount: Int = 100) {
    products(first: 9, after: $cursor, query: $query) {
      edges {
        cursor
        node {
          id
          selected @client
          title
          description
          images(first: $imageCount) {
            edges {
              node {
                id
                originalSrc
                selected @client
              }
            }
          }
        }
      }
    }
  }
`;

У меня есть набор products с selected: true, и у каждого из этих продуктов будет один или несколько images с selected: true. Мое намерение состоит в том, чтобы запросить локальный кэш GraphQL и получить все продукты вместе с их изображениями, чтобы я мог затем отфильтровать их на основе флага selected

Это то, что я пробовал до сих пор.

Я написал запрос ниже

export const GET_SELECTED_PRODUCTS = gql`
  {
    selectedProducts @client
  }
`;

Я написал определения для вышеупомянутого запроса в разделе resolvers при создании ApolloClient, как показано ниже

{
  Query: {
    selectedProducts(root, variables, { cache }) {
      let data = [];
      try {
       //Is this the right way to query the cache??
        const results = cache.readQuery({
          query: gql`
            query Products {
              products {
                id
                selected @client
                images(first: 100) {
                  edges {
                    node {
                      id
                      originalSrc
                      selected @client
                    }
                  }
                }
              }
            }
          `
        });

        //code to filter selected products

        data = results.data;
      } catch (ex) {
        console.error(ex);
      }
      return data;
    }
  }
}

I Я пытаюсь использовать вышеуказанный запрос в компоненте, как показано

export default () => {
  const { data: productsData = {} } = useQuery(GET_SELECTED_PRODUCTS);
  const { selectedProducts = [] } = productsData;
  //Render selected products
}

Существует некоторая сетевая задержка для заполнения кеша продуктом (путем выполнения GET_PRODUCTS_QUERY). Поэтому при первом рендеринге компонента GET_SELECTED_PRODUCTS выдает ошибку (как и ожидалось), поскольку продукты еще не находятся в кэше. Как только продукты находятся в кеше, некоторые мутации (помечающие поле selected как true) выполняются на объекте продукта, когда пользователь нажимает на продукты. У меня сложилось впечатление, что когда происходит такая мутация, ловушка useQuery снова выполняет запрос GET_SELECTED_PRODUCTS, чтобы получить последнее обновление. Но этого не происходит. Как подключить компонент, чтобы изменить и извлечь последние результаты запроса, если что-то изменилось в объекте продукта?