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

【问题标题】：Bind component state with Apollo local state将组件状态与 Apollo 本地状态绑定
【发布时间】：2019-06-17 00:01:10
【问题描述】：

我想使用 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,
};

我要做的是将应用组件的状态与 apollo 本地状态绑定。这样更改本地状态“loggedIn”变量将使用相关路由器（会话路由器或 Approuter）重新呈现

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

【问题讨论】：

登录时是否有查询或突变？或者请求当前登录的用户？
是的。有一个登录突变。它所做的是根据正确的登录信息将 apollo 本地状态 loggedIn 变量更新为 true。由于本地状态变量更改应用程序应重新渲染到正确的路由器。我想要的是将 apollo-local state logggedIn 变量与我的应用程序组件状态变量 user 绑定
我可能缺乏充分理解您的用例的上下文，但是通过apollo-link-state 管理单独的loggedIn 状态和通过组件状态管理user 状态似乎是多余的.如果我们想知道“用户是否登录”并相应地呈现AppRouter 或SessionRouter，似乎您可以使用Query 组件或使用readQuery/readFragment 客户端实例的方法。
我同意丹尼尔·里尔登的观点。我看不到将状态存储在 React 状态和 apollo 缓存中的好处。另一个小批评 - 你也不需要在那里使用 ApolloProvider。相反，您应该只使用带有 @client 指令的 Query 组件。

标签： apollo react-apollo apollo-client

【解决方案1】：

如果你真的想将 Apollo 状态绑定到组件状态，你可以这样做：

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

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

【讨论】：