Question

我正在尝试在Android模拟器中运行React Native应用程序并收到此错误：

以下是我的应用如何设置原生应用的设置：

import React from 'react';
import { UIManager } from 'react-native';
import { ApolloProvider } from 'react-apollo';
import { ThemeProvider } from 'styled-components';

import { store, client } from './src/store';
import { colors } from './src/utils/constants';

import AppNavigation from './src/navigations';

if (UIManager.setLayoutAnimationEnabledExperimental) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

export default class App extends React.Component {
  render() {
    return (
      <ApolloProvider store={store} client={client}>
        <ThemeProvider theme={colors}>
          <AppNavigation />
        </ThemeProvider>
      </ApolloProvider>
    );
  }
}

以及store.js的内容：

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import ApolloClient, { createNetworkInterface } from 'apollo-client';
import thunk from 'redux-thunk';

import reducers from './reducers';

const networkInterface = createNetworkInterface({
  uri: 'http://192.168.142.1:3000/graphql',
});

export const client = new ApolloClient({
  networkInterface,
});

const middlewares = [client.middleware(), thunk];

export const store = createStore(
  reducers(client),
  undefined,
  composeWithDevTools(applyMiddleware(...middlewares)),
);

这是我的HomeScreen.js：

import React, { Component } from 'react';
import styled from 'styled-components/native';
import { graphql } from 'react-apollo';
import { ActivityIndicator, FlatList } from 'react-native';

import FeedCard from '../components/FeedCard/FeedCard';

import GET_TWEETS_QUERY from '../graphql/queries/getTweets'

const Root = styled.View`
    flex: 1;
    paddingTop: 5;
`;

class HomeScreen extends Component {
    _renderItem = ({ item }) => <FeedCard {...item} />;

    render () {
        const { data } = this.props.data;
        if (data.loading) {
            return (
                <Root>
                    <ActivityIndicator size="large" />
                </Root>
            );
        }
        return (
            <Root>
                <FlatList
                    contentContainerStyle={{ alignSelf: 'stretch' }}
                    data={data.getTweets}
                    keyExtractor={item => item._id}
                    renderItem={this._renderItem}
                />
            </Root>
        );
    };
}

export default graphql(GET_TWEETS_QUERY)(HomeScreen);

这是我的graphql查询：graphql/queries/getTweets.js：

import { gql } from 'react-apollo'

export default gql`
    {
        getTweets {
            _id
            text
            createdAt
            favoriteCount
            user {
                username
                firstName
                lastName
                avatar
            }
        }
    }
`;

我确保android模拟器能够像这样加载graphql：

这意味着我的开发者和模拟器设备能够看到graphql服务器。

我测试了我的查询，它按预期工作：

任何想法可能出错？

Answer 1

Graphql会将查询结果传递给名为data的道具中的包装组件，在官方apollo文档中阅读有关https://jsfiddle.net/jonahe/hfu52x0s/结构的更多信息。我认为您在props data中遇到了问题。现在，您的data未定义，并且您正试图在其上调用loading。在HomeScreen render方法中，const { data } = this.props;不是const { data } = this.props.data;。

通过Apollo在React Native应用程序上使用GraphQL查询

1 个答案: