GraphQL queries/mutations only work on production when also running localhost and Apollo Client is set to localhost only

Question

I have a website in production (https://socialvc.netlify.app/) but the queries on the page will only appear if the app is also running locally on localhost:3000.

I tried to configure ApolloClient 3 ways

1. locally only
2. with a conditional to see if the app is in production or local environment
3. exclusively the production ur - only the first code block works on prod and it only works if I am running locally as well

All 3 are demonstrated below:

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

so if im running my localhost:3000 I can see the queries in production

I tried

let uri = "http://localhost:3000/api/graphql";
if (process.env.NODE_ENV === "production") {
  uri = "https://socialvc.netlify.app/api/graphql";
}

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

and

const client = new ApolloClient({
  uri: "https://socialvc.netlify.app/api/graphql",
  cache: new InMemoryCache(),
});

Some more info: I am using Next.JS with graphql/ApolloClient/Prisma and Postgre

Edit: So I have cors enabled but am still getting that error. Below I show where I have set my headers and allowed for Cors. Could I be missing something there?

const apolloServer = new ApolloServer({
  typeDefs,
  resolvers,
});
const startServer = apolloServer.start();

export default async function handler(req: any, res: any) {
  res.setHeader("Access-Control-Allow-Credentials", "true");
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-Methods, Access-Control-Allow-Origin, Access-Control-Allow-Credentials, Access-Control-Allow-Headers"
  );
  res.setHeader(
    "Access-Control-Allow-Methods",
    "POST, GET, PUT, PATCH, DELETE, OPTIONS, HEAD"
  );
  if (req.method === "OPTIONS") {
    res.end();
    return false;
  }
  await startServer;
  await apolloServer.createHandler({
    path: "/api/graphql",
  })(req, res);
}

Answer 1

Enable CORS for Apollo Server 4 and Next.js

src/allow-next-api-cors.ts

import { NextApiResponse, NextApiRequest, NextApiHandler } from "next";

const allowedHeaders = [
  "access-control-allow-credentials",
  "access-control-allow-origin",
  "apollographql-client-name", // this might be key for you
  "authorization",
  "content-type",
];

export const allowNextApiCors = (handler: NextApiHandler) =>
  async (req: NextApiRequest, res: NextApiResponse) => {
    res.setHeader("Access-Control-Allow-Credentials", "true");
    res.setHeader("Access-Control-Allow-Origin","*");// research having this set to *
    res.setHeader("Access-Control-Allow-Methods", ["GET", "OPTIONS", "POST"]);
    res.setHeader("Access-Control-Allow-Headers", allowedHeaders.join(","));
    if (req.method === "OPTIONS") {
      res.status(200).end();
      return;
    }
    await handler(req, res);
  };

api/graphql.ts

import { startServerAndCreateNextHandler } from "@as-integrations/next";
import { NextApiRequest, NextApiResponse } from "next";
import { ApolloServer } from "@apollo/server";
// set correct import paths
import { typeDefs, resolvers } from "your-types-and-resolvers";
import { allowNextApiCors } from "src/apollo-next-allow-cors";

type User = { email: string; id: string; name: string; role: string };
type Context = { currentUser: User; accessToken: string };
type CreateContext = (req: NextApiRequest, res: NextApiResponse) => Promise<Context>;

const getUser = (): Context => ({
  currentUser: {
    email: "test@example.com",
    id: "1",
    name: "Test User",
    role: "USER",
  },
  accessToken: "super-secret-token",
});

const context: CreateContext = async () => {
  const { currentUser, accessToken } = getUser();
  return { currentUser, accessToken };
};

const context: CreateContext = async () => {
  const { currentUser, accessToken } = getUser();
  return { currentUser, accessToken };
};

const apolloServer = new ApolloServer({ typeDefs, resolvers });

const handler = startServerAndCreateNextHandler(apolloServer, { context });

export default allowNextApiCors(handler);