&引用；必须提供查询字符串"；React和Nexus Graphql服务器上的Apollo客户端出错

我开始使用GraphQL和新的Nexus框架GraphQL服务器，这是一个很棒的产品

在我的服务器端，我定义了我的模式，我可以用prisma查询我的数据库，一切都运行得很顺利。我还可以从Nexus Graphql游乐场和Postman查询数据

现在，我想让事情在客户端运行。我知道Apollo客户端是将React与Graphql集成的最佳解决方案，但我就是不能让它正常工作。我读了很多文件，但我遗漏了一些我无法理解的东西

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

我正在根据阿波罗的文档配置它。下面的例子是我正在测试的Apollo的新3.0测试版，但在上一个稳定版本上也会出现同样的情况。我相信我需要做些别的事情来整合阿波罗和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;

从“React”导入React
从'@apollo/client'导入{ApolloProvider}；
从“./database/apollo”导入客户端
从“./components/Home”导入主页
常量应用=（）=>{
返回(
)
}
导出默认应用程序；

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

import React，{useState，useffect，useReducer}来自“React”
从“@apollo/client”导入{useQuery，gql}
const PUBLICATIONS=gql`
{
专辑回顾（最近：1）{
标题
}
}
`
常量Home=（）=>{
const{loading，error，data}=useQuery（发布）
如果（加载）返回加载

如果（错误）返回错误：(

返回data.albumreviews.map（（{review}）=>(
{JSON.parse（review）}
))
}
导出默认主页

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

相信我，为了得到一个不同的答案，我已经尝试了数千次调整这个问题

有人能帮我继续吗？我应该向apollo客户端提供Nexus模式吗？这样做的更好方法是什么？

你应该这样做。我不知道为什么该选项会导致你的请求格式错误，但它会使你的响应无法被读取。删除

fetchOptions

并在服务器端的CORS中列出您的客户端URL。文档中显示了CORS与Nexus的使用情况