Не удается прочитать правильный запрос в клиенте GraphQL Apollo

На одной из моих страниц в моем приложении я делаю два вызова API с клиентом graphql apollo. Один document, другой menu. Мне нужны данные меню в одном из моих компонентов, поэтому я хочу использовать readQuery, чтобы не получать их снова. Что я делаю:

const client = useApolloClient();

  try {
const testData = client.readQuery({
  query: gql`
  query ($result: String) {
    menu(result:  $result) {
      text
    }
  }
`,
  variables: {
    result: „testresult”
  },
});
console.info(testData);
} catch(e) {
  console.info(e);
}

Что делает graphQL, так это ищет document корневой запрос, поэтому ошибка выглядит так:

Invariant Violation: Can't find field menu({"lang":"en-us"}) on object 

{
  "document({\"lanf\":\"en-us\",\"id\":\"mySite\"})": {
    "type": "id",
    "generated": false,
    "id": "XO5tyxAAALGzcYGG",
    "typename": "Document"
  }
}.

Я считаю, что это потому, что данных меню еще нет.

Как я могу ждать, пока он будет там?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
748
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ты прав. Вы получаете сообщение об ошибке, потому что данные еще не в кеше:

The query method, on the other hand, may send a request to your server if the appropriate data is not in your cache whereas readQuery will throw an error if the data is not in your cache. readQuery will always read from the cache.

https://www.apollographql.com/docs/react/advanced/caching/#readquery

Чтобы сделать то, что вы хотите, используйте обычный запрос с cache-onlyfetchPolicy. https://www.apollographql.com/docs/react/api/react-apollo/#optionsfetchpolicy

Но не вызовет ли это тоже ошибку? Из документов: если данные для вашего запроса не существуют в кеше, будет выдана ошибка

Murakami 08.06.2019 08:23

Так что я думаю, что cache-first будет более уместным здесь. Спасибо, что помогаете и ставите на правильный путь

Murakami 08.06.2019 10:39

Нет, ошибку не выдаст. Когда вы используете useQuery, если нет данных, это все. Вы должны обработать случай отсутствия данных в пользовательском интерфейсе. fetchPolicycache-first — это поведение по умолчанию. Apollo заглянет в кеш и, если данных нет, сделает запрос. В противном случае нет. Итак, чтобы использовать cache-first, просто используйте useQuery, как обычно.

Johnny Zabala 08.06.2019 18:31

Другие вопросы по теме