Как обновить переменные в react-apollo
Вот сценарий:
ПОЛЬЗОВАТЕЛЬ 1
- 1) Переход на страницу входа
- 2) Записывает электронную почту и пароль, которые отправляются на сервер путем мутации.
- 3) Проверка подлинности ОК -> сервер возвращает токен и информацию о пользователе (id, firstName, lastName)
- 4) Токен и информация о каждом пользователе хранятся в отдельном ключе в локальном хранилище.
- 5) Пользователь перенаправляется на домашнюю страницу
- 6) Пользователь переходит на страницу профиля
- 7) На сервер отправляется запрос для получения всей информации об этом пользователе (благодаря идентификатору пользователя, хранящемуся в локальном хранилище).
Вот запрос:
const PROFILE_QUERY = gql`
query profileQuery($id: ID!) {
getUser(id: $id) {
firstName
lastName
email
}
}
`;
export default graphql(PROFILE_QUERY, {
options: {
variables: {
id: localStorage.getItem("id")
},
errorPolicy: "all"
}
})(ProfilePage);
- 8) Сервер возвращает информацию, и пользователь может видеть ее на странице профиля.
- 9) Пользователь решает выйти из системы
Итак, у первого пользователя все работает, теперь второй пользователь заходит на тот же компьютер и в тот же браузер.
ПОЛЬЗОВАТЕЛЬ 2
- Те же шаги, что и предыдущий пользователь с 1 по 7
- Запрос, отправленный на сервер для получения информации о пользователе, не работает, потому что идентификатор, отправленный запросом, является идентификатором предыдущего пользователя (и пользователю не разрешено получать информацию о другом пользователе)
Если я обновляю браузер, запрос отправляется с правильным идентификатором пользователя ...
Так почему же переменная id не обновляется (похоже, что значение id в локальном хранилище не читается) с первой попытки? Как я могу это решить?
Спасибо за помощь.
Ответы 2
После выхода первого пользователя из системы необходимо сбросить хранилище Apollo и очистить локальное хранилище.
Это происходит потому, что ваше поле options является статическим и оценивается при первой загрузке файла, содержащего запрос. (Я предполагаю, что где-то, возможно, на шагах 3 или 4, id в локальном хранилище правильно обновляется для второго пользователя.)
config.options может быть объектом, подобным тому, который вы сейчас передаете, или функцией, которая при необходимости оценивается запросом.
Итак, чтобы загружать id из localStorage каждый раз, а не один раз, вы можете сделать что-то вроде этого:
options: () => ({
variables: {
id: localStorage.getItem("id")
},
errorPolicy: "all"
})
Ваш ответ идеален, я не знал об этом! Большое спасибо Tal Z, мой запрос теперь работает отлично!
Спасибо за ваш ответ, нет, я не упоминал об этом, но я уже сбросил хранилище Apollo с помощью «this.props.client.resetStore» и удаляю элементы из локального хранилища.