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

Posted 2023-03-08

【中文标题】通过 Apollo 在 React Native 应用程序上使用 GraphQL 查询

【英文标题】：Using GraphQL queries on React Native app via Apollo

【发布时间】：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 服务器。

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

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

【参考方案1】：

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