How can I send backend Payload CMS data to frontend through Graphql API not REST API?

Question

I've build both backend & front with next Js. I'm using payload cms for the backend. I want to get payload cms data from backend to frontend via Graphql API.

In the backend- I've configured graphQl by this code in my payload.config.ts.

graphQL: {
  schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'),
}

In the frontend- I've wrapped the frontend by <ApolloProvider client={client}>{children}</ApolloProvider>;

import { ApolloClient, InMemoryCache } from "@apollo/client";

const client = new ApolloClient({
  uri: "http://localhost:5000/graphql",
  cache: new InMemoryCache(),
});

export default client;

I want to get the data in my books page. But the data isn't showing. This is my books page code -

"use client";

import { gql, useQuery } from "@apollo/client";
import client from "../../lib/apolloClient";

const GET_BOOKS = gql`
  query GetBooks {
    Books {
      docs {
        id
        title
        author {
          name
        }
        description
      }
    }
  }
`;

type Book = {
  id: string;
  title: string;
  author: {
    name: string;
  };
  description: string;
};

const Books = () => {
  const { loading, error, data } = useQuery(GET_BOOKS, { client });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  const books: Book[] = data.Books.docs;

  console.log(books);

  return (
    <div>
      <h1 className="font-bold text-center mt-10 text-3xl">Book Page</h1>
      <div>
        <h1>Books</h1>
      </div>
    </div>
  );
};

export default Books;

I'm facing some core's error while using uri = "http://localhost:5000/graphql" like this - enter image description here

If I use uri = "http://localhost:5000/api/graphql" enter image description here

What is the problem & Do I need to configure anything about graphql in the payload cms? How can I solve get the data from payload in the frontend?

Answer 1

You have to add your frontend URL in the cors.

export default buildConfig({
  cors: ["http://localhost:5000"],
});