"Must provide query string" React 和 Nexus Graphql 服务器上的 Apollo 客户端错误

Question

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

在我的服务器端，我定义了我的模式，我可以用 Prisma 查询我的数据库，一切都运行顺利。我还可以从 Nexus GraphQL playground 和 Postman 查询数据。

现在，我想让客户端运行。我看到 Apollo Client 是将 React 与 GraphQL 集成的最佳解决方案，但我就是做不到。我阅读了大量文档，但遗漏了一些我无法理解的内容。

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

我正在根据其文档配置 Apollo。下面的例子是我正在测试的新的 Apollo 3.0 Beta 版本，但同样的情况发生在最后一个稳定版本上。我认为我需要做一些其他事情来集成 Apollo 和 Nexus。

每个查询 returns：“必须提供查询字符串”。 playground 中的相同查询非常有效。

这是我的基本测试代码：

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

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

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

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

Answer 1

你应该在文档中 never use no-cors. Off hand, I'm not sure why that option would cause your request to be malformed, but it will make it impossible for your response to be read anyway. Remove fetchOptions and whitelist your client URL in your CORS configuration on the server-side. CORs usage with Nexus is shown here。

"Must provide query string" React 和 Nexus Graphql 服务器上的 Apollo 客户端错误

"Must provide query string" error with Apollo Client on React and Nexus Graphql Server

nexus

apollo

graphql

apollo-client

nexus-prisma