ApolloClient GraphQL 与 ReactNative

要在 React Native 应用程序中设置使用 GraphQL 的简单示例，您需要遵循以下步骤：

设置一个 React Native 项目。
安装 GraphQL 必要的依赖项。
创建一个基本的 GraphQL 服务器（或使用公共 GraphQL 端点）。
从 React Native 应用中的 GraphQL 服务器获取数据。

以下是实现此目标的分步指南：

使用 React Native CLI：

安装依赖项

安装 GraphQL 所需的依赖项。其中包括

apollo-client，apollo-cache-inmemory，apollo-link-http，和react-apollo

复制代码

npm install @apollo/client graphql

我们将使用公共 GraphQL API。在此示例中，我们将使用国家/地区 GraphQL API。

网址：'https://countries.trevorblades.com/'

从 GraphQL 服务器获取数据

现在，让我们设置 Apollo 客户端并从 React Native 应用中的 GraphQL 服务器获取数据。

javascript 复制代码

import React from 'react';
import { ApolloClient, InMemoryCache, ApolloProvider, useQuery, gql } from '@apollo/client';
import { Text, View, FlatList, StyleSheet } from 'react-native';

// Initialize Apollo Client
const client = new ApolloClient({
  uri: 'https://countries.trevorblades.com/',
  cache: new InMemoryCache()
});

// Define the GraphQL query
const GET_COUNTRIES = gql`
  {
    countries {
      code
      name
      emoji
    }
  }
`;

// Component to display countries
const CountriesList = () => {
  const { loading, error, data } = useQuery(GET_COUNTRIES);

  if (loading) return <Text>Loading...</Text>;
  if (error) return <Text>Error: {error.message}</Text>;

  return (
    <FlatList
      data={data.countries}
      keyExtractor={(item) => item.code}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text>{item.name} {item.emoji}</Text>
        </View>
      )}
    />
  );
};

export default function App() {
  return (
    <ApolloProvider client={client}>
      <View style={styles.container}>
        <Text style={styles.title}>Countries</Text>
        <CountriesList />
      </View>
    </ApolloProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: 50,
    paddingHorizontal: 20
  },
  title: {
    fontSize: 22,
    marginBottom: 20,
    textAlign: 'center'
  },
  item: {
    marginVertical: 10
  }
});

解释

Apollo 客户端设置：我们使用 GraphQL 服务器的 URI 和内存缓存初始化 Apollo 客户端。

GraphQL 查询：我们定义一个 GraphQL 查询来获取国家列表，包括其代码、名称和表情符号。

javascript 复制代码

const { loading, error, data } = useQuery(GET_COUNTRIES);

useQuery：这是 Apollo 客户端提供的一个钩子，用于从 GraphQL 服务器获取数据。调用时useQuery，它会返回一个对象，该对象具有描述查询当前状态的属性。
GET_COUNTRIES：这是您正在执行的 GraphQL 查询。它通常使用gqlApollo Client 中的模板文字标签来定义。

解构查询结果

返回的对象useQuery包含几个属性，但最常用的是：

loading：一个布尔值，指示查询当前是否正在加载（即请求正在进行中）。
error：查询失败时包含错误信息的对象。
data：查询成功完成时返回的实际数据。

这种模式可确保您的应用程序能够优雅地处理数据获取过程的不同状态，从而提供良好的用户体验。

CountriesList 组件 ：我们使用useQueryApollo 的钩子根据查询获取数据GET_COUNTRIES。如果数据正在加载，我们会显示加载文本。如果出现错误，我们会显示错误消息。获取数据后，我们使用FlatList显示国家/地区列表。

App 组件 ：我们用包装主组件ApolloProvider并将客户端传递给它。在主视图中，我们显示标题和组件CountriesList。

这个简单示例演示了如何使用 Apollo Client 将 GraphQL 集成到 React Native 应用程序中。您可以通过添加更多查询、变更和更优雅地处理不同状态来扩展此功能。

谢谢。

留下评论以供进一步询问、讨论和提出想法。