将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:找不到变量的主要内容,如果未能解决你的问题,请参考以下文章