Question

我想使用Apollo本地状态来跟踪用户是否登录的信息。

因此，我用clientState修改了Apollo客户端，如下所示。

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,
};

我想要做的是将应用程序组件的状态与阿波罗本地状态绑定在一起。这样，使本地状态“ loggedIn”变量发生突变后，相关路由器（会话路由器或Approuter）将重新呈现

如果这个问题有歧义，请随时在评论中提问。

Answer 1

如果您确实想将Apollo状态绑定到组件状态，则可以执行以下操作：

创建一个执行本地状态查询的容器组件。当本地状态查询接收到数据时，以所述数据作为道具来呈现子组件。

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

将组件状态与Apollo本地状态绑定

1 个答案: