1

我开始使用 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 架构吗？这样做的更好方法是什么？

4

1 回答 1

1

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

于 2020-04-16T13:25:14.773 回答