Using localhost graphql API results in error 400. about graphql-react

[resdevd]

Ah got it. I've been using Django graphene GraphQL backend. I suspect it's how Django handling cors resulting in this error. I'll work on that part.
I will close this now, comment on this in case of an update. Hopefully this resolves cors issue and data fetching from django graphql api into nextjs. Thanks for your help. Appreciate this library you've developed.

[jaydenseric]

I don't think options.mode = 'no-cors' is a real option:

• https://github.com/jaydenseric/graphql-react#type-graphqlfetchoptions
• https://github.github.io/fetch/#options

[resdevd]

Thanks for responding.

Using localhost graphql api resulted in "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/api/graphql/. (Reason: CORS request did not succeed)." error.
Originally I tried all the options I could, including following.

const Index = () => {
const {loading, cacheValue = {}} = useGraphQL({
fetchOptionsOverride(options) {
options.url = 'http://localhost:8000/api/graphql/'
// options.credentials = 'same-origin'
},

    headers :{
        "Access-Control-Allow-Origin" : "*"
    },
    operation: {
        query: `

{
allArticles {
id
} }`
} })

With trial and error, for some reason using mode: 'no-cors', gets rid of the message. Now I understand it's not an option to be used.
Using external api seems to work well with the example.
Can you please point me towards right direction how to get localhost:8000 graphql api data into nextjs?

[jaydenseric]

Can you please format your code blocks, I can't read that.

[resdevd]

My bad. Here is the index.js file content. Rest of the code is not changed from "with-graphql-react" example.

import {useGraphQL} from 'graphql-react'

const Index = () => {
    const {loading, cacheValue = {}} = useGraphQL({
        fetchOptionsOverride(options) {
            options.url = 'http://localhost:8000/api/graphql/'
            // options.credentials = 'same-origin'
        },
        headers :{
            "Access-Control-Allow-Origin" : "*"
        },
        operation: {
            query: `
{
  allArticles {
    id
  }
}
             ` }})

    return cacheValue.data ? (
        <p>Hello</p>
    ) : loading ? (
        <p>Loading…</p>
    ) : (
        <p>Error!</p>
    )
}

export default Index

[jaydenseric]

headers is not a valid useGraphQL option: https://github.com/jaydenseric/graphql-react#function-usegraphql

I don't know why you are having CORS problems, I run my Next.js app at http://localhost:3002 and GraphQL API at http://localhost:3003/graphql without problems.

[resdevd]

If anyone using Django graphql backend and using react frontend using nextjs "with-graphql-react" example.
You need to install python package django-cors-headers in your backend and follow the instructions specified in order to avoid cors issue.