“ React和Nexus Graphql服务器上的Apollo Client出现错误，必须提供查询字符串”

Question

我开始使用GraphQL和新的Nexus Framework Graphql服务器，这是一个很好的产品。

在服务器端，我定义了架构，我可以使用pyramida查询数据库，并且一切运行顺利。我也可以从Nexus Graphql游乐场和Postman查询数据。

现在，我想让事情在客户端运行。我看到Apollo Client是将React与Graphql集成的最佳解决方案，但我无法使事情正常进行。我阅读了大量文档，但缺少一些我无法弄清楚的东西。

GraphQL和客户端部分将托管在同一台服务器上，位于不同的节点应用程序上。

我正在根据其文档配置Apollo。下面的示例适用于我正在测试的新的3.0 Beta版本的Apollo，但是在上一个稳定版本中会发生相同的情况。我相信我需要做其他事情来整合Apollo和Nexus。

每个查询都返回：“必须提供查询字符串”。游乐场内的相同查询非常有效。

这是我的基本测试代码：

apollo.js：

import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: new HttpLink({
    uri: 'http://localhost:4000/graphql',
    fetchOptions: {
      mode: 'no-cors',
    }
  })
})

export default client

App.js：

import React from 'react'
import { ApolloProvider } from '@apollo/client';
import client from './database/apollo'
import Home from './components/Home'

const App = () => {
  return (
    <ApolloProvider client={client}>
      <Home />
    </ApolloProvider>
  )
}

export default App;

Home.js：

import React, { useState, useEffect, useReducer } from 'react'

import { useQuery, gql } from '@apollo/client'

const PUBLICATIONS = gql`
    {
      albumreviews(last:1){
        title
      }
    }
`
const Home = () =>{
    const { loading, error, data } = useQuery(PUBLICATIONS)

    if (loading) return <p>Loading...</p>
    if (error) return <p>Error :(</p>

    return data.albumreviews.map(({ review }) => (
        <div>{JSON.parse(review)}</div>
    ))
}

export default Home

在客户端：显示“错误”。在服务器端：“必须提供查询字符串”

相信我，我已经尝试过数千次调整查询以尝试获得不同的答案。

可以帮助我继续前进吗？我应该为阿波罗客户端提供Nexus模式吗？什么是更好的方法呢？

Answer 1

您应该差不多never use no-cors。暂时而言，我不确定为什么该选项会导致您的请求格式错误，但是无论如何它都将无法读取您的响应。删除fetchOptions并将客户端URL列入服务器端的CORS configuration中。 Nexus的COR使用情况在文档中显示为here。