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

Posted

技术标签:

【中文标题】React 和 Nexus Graphql 服务器上的 Apollo 客户端出现“必须提供查询字符串”错误【英文标题】:"Must provide query string" error with Apollo Client on React and Nexus Graphql Server 【发布时间】:2020-07-29 17:25:39 【问题描述】:

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

在我的服务器端,我定义了我的架构,我可以使用 Prisma 查询我的数据库,并且一切运行顺利。我还可以从 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

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

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

可以帮助我继续前进吗?我应该向 apollo 客户端提供 Nexus 架构吗?这样做的更好方法是什么?

【问题讨论】:

【参考方案1】:

你应该很喜欢never use no-cors。顺便说一句,我不确定为什么该选项会导致您的请求格式错误,但无论如何它都会使您的回复无法被阅读。删除 fetchOptions 并在服务器端的 CORS configuration 中将您的客户端 URL 列入白名单。文档中的here 显示了 Nexus 的 COR 使用情况。

【讨论】:

以上是关于React 和 Nexus Graphql 服务器上的 Apollo 客户端出现“必须提供查询字符串”错误的主要内容,如果未能解决你的问题,请参考以下文章

使用 GraphQL、Nexus 和 Prisma 优化 SQL 查询

使用 nexus-prisma graphql 处理文件上传

将自定义 GraphQL 解析器和类型添加到 Prisma/Nexus 架构中

Nexus GraphQL Prisma 事件字段

React、Graphql 和 Passport.js

如何在 GraphQL Nexus 的数组中定义非空元素?