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

Posted 2023-03-10

【中文标题】将组件状态与 Apollo 本地状态绑定

【英文标题】：Bind component state with Apollo local state

【发布时间】：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 组件。

【参考方案1】：

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

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

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