Unlocking the Power of Next.js and GraphQL: Overcoming CORS Errors on Localhost

Are you stuck in the midst of a Next.js and GraphQL project, only to be halted by a pesky CORS error on localhost? Fear not, dear developer, for this comprehensive guide is here to rescue you from the depths of frustration! In this article, we’ll delve into the world of Next.js and GraphQL, exploring the nuances of `getStaticProps` and CORS policies. Buckle up, and let’s dive in!

Setting the Stage: Next.js, GraphQL, and CORS

Next.js is a popular React-based framework for building server-rendered, statically generated, and performance-optimized websites and applications. GraphQL, on the other hand, is a query language for APIs that enables flexible and efficient data retrieval. When combined, these two technologies can create a powerful and scalable architecture for your project.

However, as you’ve likely discovered, when working with Next.js and GraphQL on localhost, you might encounter aCors error. This error occurs when your browser blocks a request from your application to an API due to same-origin policy restrictions. In our case, the error arises when making a GraphQL request from a Next.js component.

The Problem: CORS Error on Localhost

When you try to make a GraphQL request from a Next.js component on localhost, you might see an error message similar to this:

Access to XMLHttpRequest at 'http://localhost:3000/graphql' from origin 'http://localhost:3000' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

This error is a result of the browser’s same-origin policy, which restricts web pages from making requests to a different origin (domain, protocol, or port) than the one the web page was loaded from. In our case, the Next.js component is trying to make a request to the GraphQL API on the same origin (localhost), but the browser is blocking it due to the lack of CORS configuration.

The Solution: Enabling CORS for GraphQL Requests

To overcome the CORS error, we need to configure our GraphQL API to allow cross-origin requests. There are a few ways to achieve this, but we’ll focus on two common approaches:

Approach 1: Using the CORS Middleware in Next.js

In your `next.config.js` file, add the following configuration:

module.exports = {
  async headers() {
    return [
      {
        source: '/graphql',
        headers: [
          {
            key: 'Access-Control-Allow-Origin',
            value: '*',
          },
          {
            key: 'Access-Control-Allow-Headers',
            value: 'Content-Type, Authorization, Set-Cookie',
          },
          {
            key: 'Access-Control-Allow-Methods',
            value: 'POST, GET, OPTIONS, PUT, DELETE',
          },
        ],
      },
    ];
  },
};

This configuration enables CORS for the `/graphql` endpoint, allowing requests from any origin (`*`). You can adjust the `Access-Control-Allow-Origin` value to specify a specific domain or set of domains.

Approach 2: Using the `cors` Package in GraphQL Server

In your GraphQL server, you can use the `cors` package to enable CORS. Install it using npm or yarn:

npm install cors

Then, in your GraphQL server file (e.g., `server.js`), add the following code:

const express = require('express');
const cors = require('cors');
const { graphqlHTTP } = require('express-graphql');

const app = express();

app.use(cors({ origin: '*', credentials: true }));

app.use('/graphql', graphqlHTTP({
  schema: schema,
  graphiql: true,
}));

app.listen(3000, () => {
  console.log('GraphQL API server listening on port 3000');
});

This configuration enables CORS for the GraphQL server, allowing requests from any origin (`*`). Again, you can adjust the `origin` value to specify a specific domain or set of domains.

Using `getStaticProps` with GraphQL Requests

Now that we’ve enabled CORS for our GraphQL API, let’s explore how to use `getStaticProps` to make GraphQL requests from our Next.js component.

`getStaticProps` is a special method in Next.js that allows you to pre-render pages at build time. When using `getStaticProps`, Next.js will statically generate the page and provide the generated HTML to the client. This approach can significantly improve page load times and SEO.

Example: Using `getStaticProps` with GraphQL Request

Here’s an example of how you can use `getStaticProps` to fetch data from a GraphQL API:

import { getStaticProps } from 'next';
import { gql, GraphQLClient } from 'graphql-request';

const query = gql`
  {
    users {
      id
      name
      email
    }
  }
`;

const client = new GraphQLClient('http://localhost:3000/graphql', {
  headers: {
    'Content-Type': 'application/json',
  },
});

export const getStaticProps = async () => {
  const data = await client.request(query);
  return {
    props: {
      users: data.users,
    },
  };
};

const HomePage = ({ users }) => {
  return (
    <div>
      <h1>Users:</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            <span>{user.name}</span> <span>({user.email})</span>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default HomePage;

In this example, we define a GraphQL query using the `gql` tag, and then create a `GraphQLClient` instance with the `http://localhost:3000/graphql` endpoint. We then use `getStaticProps` to fetch the data from the GraphQL API, and pass the result as props to our `HomePage` component.

Conclusion

In this comprehensive guide, we’ve explored the world of Next.js and GraphQL, delving into the nuances of `getStaticProps` and CORS policies. By enabling CORS for our GraphQL API and using `getStaticProps` to make GraphQL requests, we’ve overcome the pesky CORS error on localhost.

Remember, when working with Next.js and GraphQL, it’s essential to understand the implications of CORS policies and how to configure them properly. By following the approaches outlined in this article, you’ll be well on your way to building scalable and efficient applications that marry the best of both worlds.

Next.js Version	12.0.7
GraphQL Version	15.5.0
CORS Package Version	2.8.5

Happy coding, and may the GraphQL be with you!

Here are 5 FAQs about “Next js- GraphQl Request is working in getStaticProps on component level but in component itself it’s throwing CORS error on localhost”:

Frequently Asked Questions

Stuck with CORS errors on localhost while using Next.js and GraphQL? Don’t worry, we’ve got you covered! Here are some FAQs to help you troubleshoot the issue.