Как использовать API apollo-client напрямую для запроса с помощью fetchPolicy = 'cache-and-network'?

1

Я хочу использовать кеш apollo с apollo-client api напрямую, используя fetchPolicy «cache-and-network». Кажется, нам нужно использовать watchQuery api вместо запроса, но, к сожалению, я не смог заставить его работать.

Так что, ребята, не могли бы вы дать мне пример кода для использования watchQuery для получения данных, которые мы получаем из запроса: loading, data, networkStatus ...?

client.query({ query: Query.getUserById, fetchPolicy: 'cache-and-network', variables: { userId } }).then(data => { console.log(data.loading, data.getUserById) })

3

Я думаю, что apollo уже предоставляет любую конфигурацию для всех операций, fetch-policyи его документация в основном охватывает все варианты использования.

Вы можете предоставить свой код? интересно, почему Queryне работает, когда вы используете другой типcache

6
  • Просто добавил код, показывающий, как я использую запрос apollo-client напрямую. Для компонента <Query> из response-apollo он определенно работает хорошо. Но я не мог использовать его в своем компоненте, потому что он вызывался каждый раз при запуске метода рендеринга. Так его столько раз называли :( Возможно, я уже неправильно его использовал.Phuong ITBK 31 авг.
  • Дело не в том, что ты использовал это неправильно. Я думаю, что это ошибка, которую они решили в Queryкомпоненте, потому что я тоже столкнулся с этой проблемой, когда я установил политику выборки через @graphql () и решил ее с помощью Queryкомпонента. Вы пробовали использовать async await? Вы можете попробовать использовать, refetchдумаю, это сработает. поэтому вы используете renderProps и переходите refetchк вашему component. Или вы можете использовать аполло-крючки :)Kaslie 31 авг.
  • Я не знаю, как использовать async await в этом случае. Для использования refetch, да, он хорошо работает, когда я использую graphql (от 'response-apollo') через HOC. Но есть некоторые проблемы: 1. этот запрос будет вызываться автоматически при создании компонента -> избыточный запрос, я не хочу вызывать этот запрос здесь. 2. в это время переменные запроса недоступны, мне нужно передать неверные данные. Тогда, если есть 2 разных запроса refetch и я вызываю их оба, здесь будут некоторые неожиданные результаты. Phuong ITBK 31 авг.
  • Понятно , попробуйте прочитать этот пост dev.to/bdbch/automatically-watch-queries-in-apollo-graphql-n45 . Kaslie 31 авг.
  • Он работает, как я и ожидал. Большое спасибо, Касли! Phuong ITBK 1 сен '19 в 23:53
0

2021 год:

Если вы используете реакцию, useQuery()ловушка уже следует за поведением watchQueryвместо query. Итак, вам разрешено делать это:

  const { loading, error, data, refetch } = useQuery(query, {
    fetchPolicy: "cache-and-network"
  });

Или установите его как defaultOptions при создании клиента apollo:

import {
  ApolloClient,
  InMemoryCache,
  HttpLink,
  DefaultOptions
} from "@apollo/client";

const defaultOptions: DefaultOptions = {
  watchQuery: {
    fetchPolicy: "cache-and-network",
    errorPolicy: "ignore",
    notifyOnNetworkStatusChange: true
  }
};
export const platformClient = new ApolloClient({
  link: new HttpLink({
    uri: "https://xxxxx",
    credentials: "same-origin"
  }),
  cache: new InMemoryCache(),
  defaultOptions
});

Некоторое объяснение того, почему cache-and-networkэто не разрешено queryнамеренно.

Причина объясняется еще в 2019 году здесь: https://github.com/apollographql/apollo-client/issues/3130#issuecomment-478409066
По сути, поведение / логика query()не поддерживает эту стратегию выборки. Таким образом, они блокируют это на уровне набора текста.