Connecting graphql query response with react-redux, getting ReferenceError: Can't find variable

Question

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

我有以下 graphql 查询 returns 登录用户的以下信息（使用 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 来验证它，我可以看到数据.

P.S。很抱歉 post，我不知道如何描述这个问题。

错误在 Android 模拟器中是这样出现的：http://i.imgur.com/VdT2TJq.png

Answer 1

您看到该错误是因为您在 action creator 中使用了未声明的变量：

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

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

Connecting graphql query response with react-redux, getting ReferenceError: Can't find variable

Connecting graphql query response with react-redux, getting ReferenceError: Can't find variable

react-native

react-redux

graphql

apollo-client