Клиент Apollo клиент.Запрос на чтение возвращает значение null, когда данные находятся в кэше

#reactjs #apollo #apollo-client #react-apollo

Вопрос:

Это, должно быть, ошибка пользователя, но у меня есть приложение с простым currentUser запросом, которое ищет идентификатор JWT, ищет его и возвращает соответствующего пользователя.

Я могу посмотреть на devtools и увидеть, что он находится в кэше как __ref:User:19

 export const CURRENT_USER_QUERY = gql`
  query{
    currentUser {
      id
      fullName
      email
    }
  }
`
 

Но в моем компоненте, когда я это делаю const { currentUser } = client.readQuery({ query: CURRENT_USER_QUERY }); (периодически), взрывается, потому что:

 Cannot destructure property 'currentUser' of 'client.readQuery(...)' as it is null.
 

Пользователь:19 существует, и это все, что мне нужно. Я нажал перезагрузить, и та же страница работает.

У меня в клиенте установлена политика ошибок по умолчанию «все».

Это версия 3.3.11 клиента. Chrome v88.04, чего бы это ни стоило. Отреагируйте 17.01.

Я что-то здесь упускаю? Не должно ли это возвращать значение синхронно (и надежно), если этот элемент находится в кэше?

Есть ли лучший способ справиться с этой ситуацией? Я пытаюсь отодвинуть это приложение от хранения вещей в redux или каком-либо поставщике контекста, поскольку оно уже обрабатывается Apollo. Кажется излишним возлагать эту ответственность на кучу разных вещей.

Комментарии:

1. Идея верна, просто следите за любыми условиями гонки, которые могут возникнуть в зависимости от того, где вы читаете исходные данные при использовании useQuery

Ответ №1:

У меня были проблемы с .readQuery() прошлой ночью. Я каждый раз получал возвращаемое значение null, хотя логика была правильной. Я вызывал .readQuery() компонент, который я импортировал на свою страницу реакции.

В конечном итоге моя проблема заключалась в том, что я не обновлял тот же запрос, который я сделал на странице «родительская» реакция, что и в компоненте.

Я не знаю, та ли это проблема, с которой вы сталкиваетесь, но я подумал, что оставлю это здесь на вечность и перспективу.

Комментарии:

1. Действительно, вам нужно использовать тот же запрос, иначе кэш его не найдет. Очевидно, это тоже была моя проблема, тх!

Ответ №2:

Я столкнулся с той же проблемой. Я исправил это так:

 const existingData = cache.readQuery({
        query: GET_CONTRACT,
        variables: {
          ...variables,
        },
      });
 

Комментарии:

1. Я не понимаю, что ты хочешь сказать «исправил это»?

2. Я получил ту же ошибку, что и упоминалось выше, и поделился тем, как мне удалось извлечь информацию из кэша.

3. @Alia Спасибо за ваш ответ. Добавление тех же переменных, что и мой первоначальный запрос, позволило мне извлечь данные из кэша.

4. @NickGelotte Отлично, рад помочь 😀

5. Ах, @Алия, я понимаю, о чем ты говоришь, но в моем случае не было никаких переменных. currentUser был запрос, и он ссылался на пользователя в кэше с идентификатором. Как бы то ни было, эта проблема, похоже, «исчезла» в последнее время. По крайней мере, с тех пор я с ним не сталкивался.

Ответ №3:

Проблема здесь может заключаться в новых переменных или в отсутствии переменных. Таким образом, запрос был сделан с переменными, и вы пытаетесь получить его из кэша без них. .readQuery из кэша должны быть идентичны