GraphQL works on Postman, but not on React - using Django API

Question

When I try to query my API on React, I am getting a 400 Bad Request, however I am able to make the same queries fine on Postman (browser and interface version). I don't get any error message so it seems impossible to troubleshoot. Does anyone know how I can at least troubleshoot this?

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {
  Route,
  BrowserRouter as Router,
  Switch
} from 'react-router-dom';
import { 
  ApolloClient, 
  InMemoryCache, 
  ApolloProvider, 
  HttpLink, 
  from 
} from "@apollo/client";
import { onError } from '@apollo/client/link/error';


const errorLink = onError(({ graphqlErrors, networkError }) => {
  if (graphqlErrors) {
    graphqlErrors.map(({ message, location, path }) => {
      alert(`Graphql error ${message}`);
    });
  }
});

const link = from([
  errorLink,
  new HttpLink({
    credentials: 'same-origin',
    uri: "http://localhost:8000/graphql/",
    fetchOptions: {
      mode: 'no-cors',
    },
  }),
]);

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: link,
  connectToDevTools: true,
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <Router>
      <React.StrictMode>
        <Switch>
          <Route exact path="/" component={App} />
        </Switch>
      </React.StrictMode>
    </Router>
  </ApolloProvider>,
  document.getElementById('root'));

Queries.js

import { gql } from '@apollo/client'

export const LOAD_USERS = gql`
    query {
        users {
            edges {
                node {
                    email
                }
            }
        }
    }
`;

GetUsers.js

import React, { useEffect } from 'react';
import { useQuery, gql } from '@apollo/client';
import { LOAD_USERS } from '../graphql/Queries';

function GetUsers() {

    const {error, loading, data} = useQuery(LOAD_USERS)

    useEffect(() => {
        console.log(data)
    }, [data])

    return (
        <div>
            
        </div>
    )
}

export default GetUsers

GraphQL works on Postman, but not on React - using Django API

0 Answers0