ApolloClient GraphQL 与 ReactNative

news2024/11/17 5:19:18

要在 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 服务器获取数据。

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 查询来获取国家列表，包括其代码、名称和表情符号。

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

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