如何在反应原生的js函数中使用apollo graphql（react）？

Posted 2023-03-08

【中文标题】如何在反应原生的js函数中使用apollo graphql（react）？

【英文标题】：How to use apollo graphql (react) in a js function in react native?

【发布时间】：2018-10-07 10:49:11

【问题描述】：

这就是我同步数据的简单函数的样子：

功能

import  getData  from './api/index'

export default async function synchronize (navigator) 
  const data = await getData()
  // ... then store data to local db...

我正在使用 RESTful API 从服务器获取一些数据：

获取数据

import  Alert, AsyncStorage  from 'react-native'

async function getData () 
  try 
    const lastSynched = await AsyncStorage.getItem('data.lastSynched')
    const date = lastSynched ? Number(Date.parse(lastSynched)) / 1000 : 0
    const token = await AsyncStorage.getItem('auth.token')
    const uriBase = 'http://localhost:3000'

    let response = await fetch(`$uriBase/get-data/$date`, 
      method: 'GET',
      headers: 
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'x-access-token': token
      
    )
    let responseJson = await response.json()
    return responseJson
   catch (error) 
    Alert.alert('Error', 'Could not synchronize data')
  


export default getData

但现在我使用的是 apollo graphQL，但我不明白如何使用查询获取数据，因为我在这里使用的是函数 (synchronize()) - 而不是组件。

【问题讨论】：

这里你没有使用阿波罗。您正在尝试执行请求。

【参考方案1】：

我认为良好的开端将从link 开始。这里有很好的例子，如何使用 Apollo 客户端执行查询和获取数据。

也许我没有正确理解是什么问题，但这里是 Apollo 的高水平使用。

首先，您需要创建 Apollo 客户端并至少向 GraphQL 端点提供 URI。

import ApolloClient from "apollo-boost";

const client = new ApolloClient(
  uri: "https://w5xlvm3vzz.lp.gql.zone/graphql"
);

创建客户端后，您应该使用之前创建的客户端执行查询，如下所示：

import gql from "graphql-tag";

client
  .query(
    query: gql`
      
        rates(currency: "USD") 
          currency
        
      
    `
  )
  .then(result => console.log(result));

确保您安装了apollo-boost react-apollo graphql-tag graphql 软件包。还要确保像这样将查询包装到 GraphQL 标记中，因为它会编译您的查询。