Error when trying to connect to the graphql endpoint of wordpress plugin

Question

I want to use wordpress as a headless cms for my ReactJS frontend and am using the WPGraphQL plugin to do so. But when I try to connect to the endpoint along with a graphql query it keeps loading for a bit of time and then gives the following error: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'

A portion of the code for the connection is as follows:

import { ApolloClient, InMemoryCache } from '@apollo/client';
import { createHttpLink } from 'apollo-link-http';

const httpLink = createHttpLink({
  uri: 'http://localhost/wordpress/graphql',
  credentials: 'include'// Add this if you need to send cookies or authentication headers
});

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

The graphql query along with how I want it displayed is as follows:

<Query query={gql`
    {
      toasters {
        edges {
          node {
            title
            slug
          }
        }
      }
      pages {
        edges {
          node {
            title
            content
          }
        }
      }
    }
  `}>
    {
      ({ loading, error, data }) => {
        if(loading) {
          return (<h1>Loading...</h1>)
        }
        console.log(data);
        return (
          <>
          <div>
            {
              data.toasters.edges.map((toaster, key) => {
                return (
                  <div key={key}>
                    <h2>{toaster.node.title}</h2>
                  </div>
                )
              })
            }
          </div>
        )
      }
    }
  </Query>

I was expecting it to output the content.

Answer 1

Check this answer and try commenting the credentials:'include' line. You will need it when you deploy it but not locally.