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

Question

I'm starting to work with GraphQL and the new Nexus Framework GraphQL server, which is a great product.

On my server-side, I defined my schema, I can query my database with Prisma and everything runs smoothly. I can query data also from the Nexus GraphQL playground and also with Postman.

Now, I want to make things work on the client-side. I see that Apollo Client is the best solution to integrate React with GraphQL, but I just can't make things work. I read tons of docs but I'm missing something that I can't figure out.

GraphQL and the client part will be hosted on the same server, on separate node applications.

I'm configuring Apollo based on its documentations. The example below is for the new 3.0 Beta Version of Apollo which I'm testing, but the same scenario happens on the last stable version. I believe that I need to do something else to integrate Apollo and Nexus.

Every query returns: "Must Provide Query String". The same query inside the playground works perfectly.

Here is my basic testing code:

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

On the client-side: "Error" is displayed. On the server-side: "Must provide query string"

Believe me, I've tried to adjust the query thousands of times trying to get a different answer.

Could some help me to move forward with this? Should I provide the Nexus schema to the apollo client? What is the better way of doing this?

Answer 1

You should pretty much 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 in the docs.