Невозможно получить обновленный кеш в компоненте на сервере, представленном приложением nextjs apollo - PullRequest
Новая
       44

Невозможно получить обновленный кеш в компоненте на сервере, представленном приложением nextjs apollo

0 голосов
/ 30 октября 2019

У меня есть приложение, отображаемое сервером apollo nextjs с использованием состояния клиента apollo. Проблема, с которой я сталкиваюсь, заключается в том, что при загрузке приложения, даже когда локальное состояние обновляется правильно, запрос локального состояния graphql, вызываемый в компоненте заголовка, не возвращает последнее состояние с правильными данными, а возвращает исходное состояние,Я не могу понять, почему это происходит, и происходит ли это из-за настройки клиента apollo или из-за кеша initialState.

Приложение представляет собой приложение, отображаемое на сервере nextjs с использованием клиента apollo. Я многократно пытался настроить установку клиента apollo, чтобы выяснить, где именно находится состояние, получающее сброс [я говорю сброс, потому что при регистрации состояния после обновления состояния дает мне правильный результат].

Конфигурация apolloизмененная версия официального nextjs apollo пример 

// lib/apollo.js
...
const appCache = new InMemoryCache().restore(initialState);
const getState = (query) => appCache.readQuery({ query });
const writeState = (state) => appCache.writeData({ data: state });

initCache(appCache);

return new ApolloClient({
  ssrMode: typeof window === 'undefined',
  link: ApolloLink.from([consoleLink, errorLink, authLink, fileUploadLink]),
  cache: appCache,
  resolvers: StateResolvers(getState, writeState),
  typeDefs,
  defaults: {},
  connectToDevTools: true,
});
...

// apollo/StateResolvers.js
export const GET_LOGIN_STATUS_QUERY = gql`
  query {
    loginStatus @client {
      isLoggedIn
    }
  }
`;

export default (getState, writeState) => {
  return {
    Mutation: {
      updateLoginStatus(_, data) {
        const { loginStatus } = getState(GET_LOGIN_STATUS_QUERY);
        const newState = {
          ...loginStatus,
          loginStatus: {
            ...loginStatus,
            ...data,
          },
        };
        writeState(newState);
        const updatedData = getState(terminal); // getting correct updated state here
        console.log('log updateLoginStatus:', updatedData);
        return { ...data, __typename: 'loginStatus' };
      },
    },
  };
};

// initCache.js
export default (appCache) =>
  appCache.writeData({
    data: {
      loginStatus: {
        isLoggedIn: false,
        __typename: 'loginStatus',
      },
    },
  });

Заголовок импортируется в компонент Layout, который используется в файле _app.js nextjs 

// header/index.js 
...
const q = gql`
  query {
    loginStatus @client {
      isLoggedIn
    }
  }
`;

const Header = (props) => {
  const { loading, data, error } = useQuery(q); // not getting the updated state here
  console.log('header query data:', loading, data, error);
  return (
    <div>header</div>
  );
};
...

Второй лог с result - это выход из файла checkLoggedIn, аналогичный файлу здесь 

// server side terminal output
log updateLoginStatus: { loginStatus: { isLoggedIn: true, __typename: 'loginStatus' } }
result: { data: updateLoginStatus: { isLoggedIn: true, __typename: 'loginStatus' } } }
header query data: true undefined undefined {}
header query data: false { loginStatus: { isLoggedIn: false, __typename: 'loginStatus' } } undefined
header query data: false { loginStatus: { isLoggedIn: false, __typename: 'loginStatus' } } undefined

Моя конечная цель - получитьправильно установите флаг isLoggedIn в заголовке, чтобы правильно переключаться между состоянием «Вход в систему» ​​и «выход из системы».

Пожалуйста, дайте мне знать, если потребуется дополнительная информация. Любая помощь будет принята с благодарностью.

...