登录状态不会在 React、Apollo Client 2、Graphcool 中被动更新

Posted 2023-03-10

【中文标题】登录状态不会在 React、Apollo Client 2、Graphcool 中被动更新

【英文标题】：Logged in state doesn't reactively update in React, Apollo Client 2, Graphcool

【发布时间】：2018-07-07 06:15:55

【问题描述】：

我正在使用 React、Apollo Client 2 和 Graphcool。我已经实现了一个登录表单。根据客户端登录的天气，在登录页面上会显示登录表单或注销按钮。

我的代码可以工作，但不会响应式更新。用户登录或注销后，在刷新页面之前没有任何变化。如何使我的代码具有反应性？

import React from 'react';
import  graphql, compose  from 'react-apollo';
import gql from 'graphql-tag';

class Login extends React.Component 
    constructor(props) 
        super(props);
        this._confirm = this._confirm.bind(this);
    

    _confirm = async e => 
        e.preventDefault();

        const result = await this.props.LoginMutation(
            variables: 
                email: '[e-mail]',
                password: 'password',
            ,
        );

        const token = result.data.authenticateUser.token;
        this._saveUserData(token);
    ;

    _saveUserData = token => 
        localStorage.setItem('auth-token', token);
    ;

    render() 
        return (
            <div>
                this.props.LoginQuery.user ? (
                    <button onClick=() => localStorage.removeItem('auth-token')>
                        Logout
                    </button>
                ) : (
                    <form onSubmit=this._confirm>
                        <input type="email" id="email" />
                        <input type="password" id="password" />
                        <button type="submit">Login</button>
                    </form>
                )
            </div>
        );
    


const LoginMutation = gql`
    mutation authenticateUser($email: String!, $password: String!) 
        authenticateUser(email: $email, password: $password) 
            token
        
    
`;

const LoginQuery = gql`
    query AppQuery 
        user 
            id
        
    
`;

const LoginContainer = compose(
    graphql(LoginMutation,  name: 'LoginMutation' ),
    graphql(LoginQuery,  name: 'LoginQuery' ),
)(Login);

export default LoginContainer;

【参考方案1】：

与 UI 有关的任何内容都不一定需要受到保护。因此，您可以轻松地使用状态或数据存储（例如 redux、mobx 等）来触发 UI 更新。

如果您希望基于 GraphQL 的突变对 UI 进行响应式更新。老实说，我会建议实施订阅，这将为您提供您正在寻找的那种反应式数据流。

Subscriptions ~ Apollo Client