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

【问题标题】：Using GraphQL queries on React Native app via Apollo通过 Apollo 在 React Native 应用程序上使用 GraphQL 查询
【发布时间】：2018-02-01 08:03:14
【问题描述】：

我正在尝试在 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 服务器。

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

有什么想法可能是错的吗？

【问题讨论】：

标签： android react-native graphql

【解决方案1】：

Graphql 会将查询结果传递给名为 data 的 prop 中的包装组件，请阅读官方 apollo 文档中有关 data 结构的更多信息。我认为你在props destructuring 有问题。现在你的data 是未定义的，你正在尝试调用loading。在HomeScreen render 方法中，它应该是const { data } = this.props; 而不是const { data } = this.props.data;。

【讨论】：