Как поделиться кэшированными данными клиента apollo с другим запросом - PullRequest
Новая
       64

Как поделиться кэшированными данными клиента apollo с другим запросом

0 голосов
/ 13 июня 2018

Я использую apollo-client@2.3.x (& react-apollo@2.1.x) со стандартом InMemoryCache, чтобы запросить магазин Shopify через API GraphQL Storefront.

У меня есть два запроса: 1. getProducts (в <Home />) и 2. getProduct($id) (в <ProductDetail />).В сценарии, который начинается с <Home />, затем щелкает продукт, я бы хотел, чтобы компонент <ProductDetail /> показывал кэшированный ответ на запрос 1 до запуска запроса 2.

В демонстрации, когда вы нажимаете на продукт, вы можете видеть, что data является пустым {} в консоли, пока не будет выполнен второй сетевой запрос.Я предполагал, что он будет кеширован, так как запросы используют один и тот же __typename и используют структуру "узла".

Может ли кто-нибудь просветить меня здесь, (A) почему это не работает, и (Б) как я могу сделать это так?

Вот сводка двух запросов:

1: " getProducts " (например, используется в <Home /> component) 

query getProducts {
  shop {
    products(first: 20) {
      edges {
        node {
          id
          ... on Product {
            title
          }
        }
      }
    }
  }
}

2: " getProduct " (например, используется в <ProductDetail /> компоненте) 

query getProduct($id: ID!) {
  node(id: $id) {
    ... on Product {
      title
    }
  }
}

1 Ответ

0 голосов
/ 13 июня 2018

Клиент GraphQL не может делать предположения о реализации распознавателей, даже если для человека API, кажется, следует простому шаблону, а поведение запросов кажется тривиальным.Вам нужно немного помочь с Cache Redirect .

Хорошо, я попробовал это здесь для вас.Я действительно не работаю с этими API-интерфейсами Relay, но он должен работать аналогично примеру. 

  cacheRedirects: {
    Query: {
      getProduct: (_, args, { getCacheKey }) => ({
        __typename: 'Node',
        node: getCacheKey({ __typename: 'Product', id: args.id }),
      }),
    },
  },
...