将graphql查询响应与react-redux连接,得到ReferenceError:找不到变量

Posted

技术标签:

【中文标题】将graphql查询响应与react-redux连接,得到ReferenceError:找不到变量【英文标题】:Connecting graphql query response with react-redux, getting ReferenceError: Can't find variable 【发布时间】:2018-02-04 12:06:23 【问题描述】:

我正在使用 apollo 和 react-redux 开发一个带有 graphql 的 react-native 应用程序。

我有以下 graphql 查询,它返回登录用户的以下信息(使用 JTW 令牌):

我正在尝试运行上述查询并通过 redux 将响应获取到 react-native 应用程序中。

这是我的 graphql/queries/me.js

import  gql  from 'react-apollo';

export default gql`
    
        me 
            avatar
            username
            firstName
            lastName
        
    
`;

我正在尝试在我的HomeScreen 上使用它,用户在成功登录后被派往该用户,如下所示:

// ...
import  graphql, compose, withApollo  from 'react-apollo';
import  connect  from 'react-redux';

import ME_QUERY from '../graphql/queries/me';


class HomeScreen extends Component 
    componentDidMount() 
        this._getUserInfo();
    

    _getUserInfo = async () => 
        const  data:  me   = await this.props.client.query( query: ME_QUERY );
        this.props.getUserInfo(me);
    ;

    render () 
        const  data  = this.props;
        if (data.loading) 
            return (
                <Root>
                    <ActivityIndicator size="large" />
                </Root>
            );
        
        return (
            // snipped
        );
    ;


export default withApollo(compose(
    connect(undefined,  getUserInfo ),
    graphql(GET_TWEETS_QUERY)
)(HomeScreen));

这是我的 actions/user.js(redux 操作)

// ...

export function getUserInfo() 
    return 
        type: 'GET_USER_INFO',
        info
    

还有我的 user 减速器:

export default (state = initialState, action) => 
    switch (action.type) 
        // ...
        case 'GET_USER_INFO':
            return 
                ...state,
                info: action.info
            ;
        default:
            return state;
    
;

getUserInfo 查询运行并获得信息后,我将尝试在名为 HeaderAvatar 的组件上使用它,如下所示:

import React,  Component  from 'react';
import styled from 'styled-components/native';
import Touchable from '@appandflow/touchable';
import  connect  from 'react-redux';

const AVATAR_SIZE = 30;
const AVATAR_RADIUS = AVATAR_SIZE / 2;

const Avatar = styled.Image`
    height: $AVATAR_SIZE;
    width: $AVATAR_SIZE;
    borderRadius: $AVATAR_RADIUS;
`;

const Button = styled(Touchable).attrs(
    feedback: 'opacity',
    hitSlop:  top: 20, bottom: 20, right: 20, left: 20 
)`
    marginLeft: 15;
    justifyContent: center;
    alignItems: center;
`;

class HeaderAvatar extends Component 
    state =  
    render () 
        if (!this.props.info) 
            // snipped
        
        return (
            <Button>
                <Avatar source= uri: this.props.info.avatar  />
            </Button>
        );
    


export default connect(state => ( info: state.user.info ))(HeaderAvatar);

知道为什么我无法从状态对象中获取info 字段吗?

我知道查询正在执行并且我正在加载信息,我通过在_getUserInfo() 函数内执行me 对象的console.log 来验证它,我可以看到数据。

附:抱歉,帖子太长了,我不知道如何描述这个问题。

这就是错误在 android 模拟器中出现的方式:http://i.imgur.com/VdT2TJq.png

【问题讨论】:

【参考方案1】:

您看到该错误是因为您在操作创建器中使用了未声明的变量:

export function getUserInfo() 
    return 
        type: 'GET_USER_INFO',
        info
    

您只需将info 添加到getUserInfo 的参数中即可。

【讨论】:

顺便说一句,当 Apollo 已经为您完成该信息时,将这些信息存储在商店中可能是多余的。如果您只想获取一次信息,您始终可以将查询 HOC 上的 refetch policy 设置为 cache-first

以上是关于将graphql查询响应与react-redux连接,得到ReferenceError:找不到变量的主要内容,如果未能解决你的问题,请参考以下文章

我可以等待我的组件连接到 react-redux 吗?

如何将 graphQL 查询属性映射到不同的响应属性?

将 json 转换为石墨烯 graphql 响应

如何将graphql查询的结果作为文件发送?

将json转换为石墨烯graphql响应

我可以通过 graphQL 查询多次查询 GraphQL 单一响应吗?