Связать состояние компонента с локальным состоянием Аполлона - PullRequest
Новая
       17

Связать состояние компонента с локальным состоянием Аполлона

0 голосов
/ 23 января 2019

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

Поэтому я изменил клиент Apollo с clientState следующим образом. 

clientState: {
    defaults: {
      loggedIn: 'false',
    },
    resolvers: {
      Mutation: {
        toggleLoggedIn(_: any, variables: any, { cache }: any) {
          // read the cart open value from the cache
          const { loggedIn } = cache.readQuery({
            query: LOGIN_STATE_QUERY,
          });
          const data = {
            data: {
              loggedIn: !loggedIn,
            },
          };
          cache.writeData(data);
          return data;
        },
      },
    },
  },

Я планирую использовать два маршрутизатора для моего приложения. и

так что вот мое состояние приложения.

Файл App.js 

const { loading, user } = this.state;

<ApolloProvider client={client}>
  {user ? <AppRouter /> : <SessionRouter />}
</ApolloProvider>

Состояние файла app.js 

this.state = {
      loading: true,
      user: null,
};

То, что я хочу сделать, это связать состояние компонента приложения с локальным состоянием apollo. так что изменение локальной переменной состояния "loggedIn" будет выполнено с соответствующим маршрутизатором (маршрутизатор сеанса или Approuter)

если в этом вопросе есть двусмысленность, пожалуйста, не стесняйтесь спрашивать в комментариях.

1 Ответ

0 голосов
/ 24 января 2019

Если вы действительно хотите связать состояние Apollo с состоянием компонента, вы можете сделать следующее:

Создать компонент контейнера, который выполняет запрос локального состояния.Когда запрос о локальном состоянии получает данные, рендерит дочерний компонент с указанными данными в качестве реквизита. 

class container extends React.Component {
render() {
  return (
    <Query query={login_query}>
      {(data, loading) => {
        if(loading) return;
        return <LoginComponent data={data} />
      }}
  )
}
}
...