Switching from utilizing apollo-server-micro to upgrading to apollo server 4

While it may seem like a simple task, I'm having trouble understanding the documentation for migrating to Apollo Server 4. My current setup involves using Next.js as a framework without Express, and I'm aiming for a serverless architecture.

Below is my current configuration:

Pages/api/index.js

import Cors from "micro-cors";
import ApolloServer from "../../apollo/config/server";

const cors = Cors();

export const config = {
  api: {
    bodyParser: false,
  },
};

const serverStarted = ApolloServer.start();

export default cors(async (req, res) => {
  if (req.method === "OPTIONS") {
    res.end();
    return false;
  }

  await serverStarted;
  await ApolloServer.createHandler({
    path: "/api",
  })(req, res);
});

The server file being imported is:

server.js

import { ApolloServer } from "apollo-server-micro";
import schema from "./schema";
import resolvers from "./resolvers";
import { context } from "./context";
import { ApolloServerPluginLandingPageDisabled } from "apollo-server-core";
const typeDefs = schema;

export default new ApolloServer({
  typeDefs,
  resolvers,
  context,
  csrfPrevention: true,
  cache: "bounded",
  plugins: [ApolloServerPluginLandingPageDisabled()],
});

Answer №1

During a discussion with Watson from the Apollo team and @DanCrews, it was revealed that there is an integration called as-integrations/next

This integration would be implemented in Pages/api/index.js

import { ApolloServer } from "@apollo/server";
import { ApolloServerPluginLandingPageDisabled } from '@apollo/server/plugin/disabled';
import { startServerAndCreateNextHandler } from "@as-integrations/next";
const server = new ApolloServer({
  resolvers,
  typeDefs,
  csrfPrevention: true,
  cache: "bounded",
  plugins: [ApolloServerPluginLandingPageDisabled()],
});
const handler = startServerAndCreateNextHandler(server, { context });
export default handler;

It was also mentioned that there would be no need for a server.js file

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Next.js encounters an issue: "The text content does not align with the server-rendered HTML"

I just set up a new Next.js project and added a very basic component: const IdPanel = () => { const [id] = useState(`${Math.random()}`); return ( <div> <h1 id={id} className={id}> {id} </h1> </div> ...

Having trouble sharing images through the API on the newest version of LinkedIn API

For some reason, I am encountering an issue where I can only post a Text only Post and the Image Post feature is not working. Surprisingly, I'm not receiving any error messages either. I have been diligently following the guidelines provided in the o ...

Ways to trigger a component to render again from a separate component

export default function Filters() { const [data, setData] = useState(Data.items) const filterItem = (type) => { const newData = Data.items.filter((newItem) => { return newItem.vehicleType === type }) setData(newData) } re ...

Sending a object as an argument to a function

Could someone please help me understand the purpose of passing an object as a function parameter? I have been trying to learn Next.js and they frequently use this method in their code. If anyone could provide a brief explanation of why this is done, it wo ...

The CORS problem arises only in production when using NextJS/ReactJS with Vercel, where the request is being blocked due to the absence of the 'Access-Control-Allow-Origin' header

I've encountered a CORS error while trying to call an API endpoint from a function. Strangely, the error only occurs in production on Vercel; everything works fine on localhost. The CORS error message: Access to fetch at 'https://myurl.com/api/p ...

Dates comparison causing Firestore security rules issue

After running the query shown below, I encountered a permission-denied message with an error in the "Monitor rules" tab. const timeNow = useMemo(() => Timestamp.now(), []); const query = query( postRef, where("tags", "array-contai ...

Looking to add an initial loading screen on Next.js, but struggling with content flashing briefly before the loader kicks in

On my website built with next.js, I want to add a loading screen that displays on the first render. However, whenever I load the page, there is a brief flash of the body content before the loader appears. I have tried changing the initial state to true, bu ...

A guide on switching font family based on locale changes (language in i18n) within Next.js

My application supports multiple languages and allows users to switch between two languages using a select input. Additionally, I want to change the font-family based on the selected language. In my _app.js file: const {locale} = useRouter(); useEffect(() ...

Error: Docker unable to locate package.json file

I'm encountering an issue. I tried building a project in Docker and received an error. The error states that during npm install, the package.json file could not be found. Here is my Dockerfile: FROM node #copy source COPY . /app # Install dependenc ...

When using Next.js revalidate, an error may occur stating: "There are keys that require relocation: revalidate

I have been attempting to utilize the revalidate function in my code by following the example provided by Vercel. However, I keep encountering an error. Here is the snippet of code that I am currently using: export async function getServerSideProps() { c ...

I am experiencing difficulty viewing the vercel deployed content on my personal domain website

After successfully creating and deploying a small project on Vercel, everything seemed to be running smoothly with the generated URL. However, I encountered an issue when trying to use a custom domain from GoDaddy. Despite following all the necessary ste ...

The design of Next.js takes the spotlight away from the actual content on the

Recently, I've been working on implementing the Bottom Navigation feature from material-ui into my Next.js application. Unfortunately, I encountered an issue where the navigation bar was overshadowing the content at the bottom of the page. Despite my ...

Styles are absent from the NextJS 13.4 App Router Middleware Page Redirect feature

Currently, I have implemented middleware that redirects users if they are not on the sign-in screen. This is only a test scenario, and in the future, it will check for a valid authentication session before redirecting. However, after the redirect, the pag ...

Unable to include query parameters in the nextjs dynamic route

I have a file called [slug].js. What I am attempting to do is add a query parameter to this dynamic route. Here's the code: await router.replace({ pathname: `${router.pathname}`, query: { coupon }, }, undefined, ...

What are the steps to deploy a React, Next.js, and Express.js application on Netlify?

I am currently in the process of deploying my application to Netlify, featuring a combination of React, Next.js, and Express.js. While there are no errors showing up in the Netlify console, unfortunately, the site is not live as expected. https://i.stack ...

Uploading base64 images to Azure Storage using Next.js is a breeze!

After attempting various alternatives to solve this issue, I discovered that many of them are outdated. Even though the code below runs without any errors and successfully uploads the image while setting the mimetype correctly, it fails to render as an ima ...

Height complete for next step

My design consists of a parent div with two child div - one containing an image and the other text. When the screen size is larger than 768px, the two div are displayed side by side, and the height of the div holding the image adjusts to match the content ...

Is it possible to utilize target="blank" in an external link when working with MDX?

For my latest project, I am developing a blog using NextJS and MDX. One of the features I would like to implement is opening external links in a new tab by adding a target="_blank" attribute. In typical Markdown syntax, I usually achieve this by using [wo ...

How to showcase and randomize a data set in a Next.js application

Is there a way to dynamically change the content of a single "Card" component on every page refresh? I want to pull data such as title, subtitle, etc from an array in a data.js file and have it display different content randomly each time. Currently, I am ...

What is the solution to the error message "Error: Missing 'key' prop for element in array react/jsx-key" when using react-icons with mapping in React?

After trying multiple methods to dynamically display icons, I finally found one that works in my case: <div style={{display: "flex", flexDirection: "row"}}> {logo?.map((logos, index )=> {return ( <React.Fragment key={ind ...