Ошибка «Необходимо указать строку запроса» с клиентом Apollo на React и Nexus Graphql Server - PullRequest
Новая
       39

Ошибка «Необходимо указать строку запроса» с клиентом Apollo на React и Nexus Graphql Server

1 голос
/ 16 апреля 2020

Я начинаю работать с GraphQL и новым сервером Nexus Framework Graphql, который является отличным продуктом.

На моей стороне сервера я определил свою схему, я могу запросить свою базу данных с помощью prisma и всего работает без сбоев. Я могу запрашивать данные также с игровой площадки Nexus Graphql, а также с Postman.

Теперь я хочу, чтобы все работало на стороне клиента. Я вижу, что Apollo Client - лучшее решение для интеграции React с Graphql, но я просто не могу заставить вещи работать. Я прочитал тонны документов, но мне не хватает чего-то, что я не могу понять.

GraphQL и клиентская часть будут размещены на одном сервере, в отдельных приложениях узла.

Я настраиваю Аполлона на основе его документации. Ниже приведен пример для новой бета-версии 3.0 Apollo, которую я тестирую, но тот же сценарий происходит с последней стабильной версией. Я считаю, что мне нужно сделать что-то еще, чтобы интегрировать Apollo и Nexus.

Каждый запрос возвращает: «Необходимо указать строку запроса». Тот же запрос внутри игровой площадки работает отлично.

Вот мой базовый c код тестирования:

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

Приложение. 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 клиенту apollo? Какой лучший способ сделать это?

1 Ответ

1 голос
/ 16 апреля 2020

Вы должны в значительной степени никогда не использовать no-cors . Я не уверен, почему эта опция вызовет искажение вашего запроса, но это все равно сделает невозможным чтение вашего ответа. Удалите fetchOptions и внесите в белый список URL вашего клиента в вашей конфигурации CORS на стороне сервера. Использование COR с Nexus показано здесь в документации.

...