当前位置：首页 > news >正文

ApolloClient GraphQL 与 ReactNative

news 2025/6/22 22:32:24

要在 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

wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

我们将使用公共 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 {codenameemoji}}
`;// 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 (<FlatListdata={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 查询来获取国家列表，包括其代码、名称和表情符号。

wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

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

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