如何通过GraphQL实现WordPress数据到React Native应用的对接？及JSON解析错误问题求助

这个错误我之前也碰到过，本质是Apollo Client请求接口后拿到的不是预期的JSON数据，而是HTML内容（比如404错误页、服务器重定向页面），所以才会出现Unrecognized token '<'的解析错误。咱们一步步来排查解决：

1. 先修正GraphQL接口地址的小问题 #

你在初始化ApolloClient时写的地址末尾多了一个斜杠：

const client = new ApolloClient({ uri:'http://10.0.2.2:10005/graphql/' })

而你提到的正确接口地址是http://10.0.2.2:10005/graphql，这个额外的斜杠可能会触发服务器的重定向，返回HTML页面而非JSON数据。先把斜杠去掉：

const client = new ApolloClient({ uri:'http://10.0.2.2:10005/graphql' })

2. 验证WordPress GraphQL接口是否正常工作 #

在电脑的浏览器里直接访问http://10.0.2.2:10005/graphql，如果是WPGraphQL插件的话，应该能看到GraphQL Playground的界面：

• 如果看不到，先确认WPGraphQL插件已经在WordPress后台激活，并且没有被禁用；
• 检查你的WordPress服务器是否正常运行，端口10005是否能正常访问，没有被防火墙或其他服务占用。

3. 确保React Native应用有网络访问权限 #

Android端 #

打开android/app/src/main/AndroidManifest.xml，确认添加了网络权限：

<uses-permission android:name="android.permission.INTERNET" />

iOS端 #

打开ios/[你的应用名]/Info.plist，添加允许HTTP请求的配置（因为你用的是http而非https）：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

4. 调试请求和响应内容 #

如果上面的步骤还没解决问题，可以给ApolloClient添加错误日志，查看实际的响应内容：

// 替换原来的ApolloClient初始化代码
import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
import { onError } from '@apollo/client/link/error';
import { ApolloLink } from 'apollo-link';

const httpLink = createHttpLink({
  uri: 'http://10.0.2.2:10005/graphql',
});

const errorLink = onError(({ graphQLErrors, networkError, response }) => {
  if (networkError) {
    console.log(`[网络错误详情]:`, networkError);
    // 如果能拿到响应，可以打印出来看是不是HTML
    if (response) console.log(`服务器返回内容:`, response);
  }
});

const client = new ApolloClient({
  link: ApolloLink.from([errorLink, httpLink]),
  cache: new InMemoryCache(),
});

通过日志你能明确看到服务器返回的是不是HTML，进一步定位问题。

5. 确认GraphQL查询语句的正确性 #

把你写的查询语句放到WordPress的GraphQL Playground里执行：

{
  posts {
    edges {
      node {
        id
      }
    }
  }
}

如果Playground里能返回正常的JSON数据，说明查询没问题；如果报错，可能是WPGraphQL的字段命名不同，或者需要授权才能访问帖子数据。

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