ReactNative使用Apollo Client无法获取GraphQL数据问题求助

核心问题：查询语句的导出导入逻辑错误 #

你当前的请求无法触发的核心原因是queries.js的导出规则和DisplayData.js的导入规则不匹配：

1. queries.js默认导出的是包含GET_USER_NAME的对象，而非直接导出gql查询实例，你在DisplayData.js直接将默认导出的对象传入useQuery，相当于传入了普通JS对象，Apollo无法识别执行。
2. 你在queries.js中先写导出语句、后定义GET_USER_NAME常量，会导致导出的对象中GET_USER_NAME为undefined。

修复方案（推荐命名导出写法） #

修改./app/api/queries.js代码：

import {gql} from '@apollo/client';

// 定义后直接命名导出
export const GET_USER_NAME = gql`
    query {
        userProfile {
          fName
          lName
        }
    }
`;

修改DisplayData.js的导入语句，对应使用命名导入：

import {useQuery} from '@apollo/client';
// 调整为命名导入
import { GET_USER_NAME } from './../api/queries';

次要问题：缺少NavigationContainer导入 #

你在App.js中使用了NavigationContainer但没有对应导入，会触发运行报错，补上导入即可：

// App.js顶部添加导入
import { NavigationContainer } from '@react-navigation/native';

可选优化项 #

如果后续你的授权token会动态更新（比如登录后刷新token），建议不要把header硬编码在ApolloClient初始化参数中，可以用createHttpLink搭配setContext中间件动态注入请求头，该优化不影响当前功能运行，可后续迭代时调整。

内容的提问来源于stack exchange，提问作者Learner4Ever