How do you mock Apollo GraphQL in Next.js SSR getServerSideProps?

[gvocale]

I have a Next.JS app that fetches via Apollo GraphQL server side via the getServerSideProps hook.

How can I intercept, mock, stub those requests in Cypress?

I have issue running the Cypress GitHub Action because it is failing on all these GraphQL queries happening server side.

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

export const getServerSideProps: GetServerSideProps = async (context) => {
  const {
    params: { slug },
  } = context;

  const client = new ApolloClient({
    ssrMode: true,
    link: ApolloLink....
    cache: new InMemoryCache(),
  });


  try {
    const { data } = await client.query<ProductBySlugQueryProps>({
      query: PRODUCT_BY_SLUG_QUERY,
      variables: { slug },
    });

    return {
      props: {
        product: data?.product || {},
      },
    };
  } catch (e) {
    captureException(e);

    return {
      notFound: true,
    };
  }
};

[mufasa71]

Hi, I am still new in Cypress, but have you tried this?

[gvocale]

It works successfully for queries I fire via the useQuery Apollo GraphGL hook inside a component, but it won't work for queries happening during server side rendering inside the Next.js getServerSideProps hook 😐

[mufasa71]

I see. Yeah I think Cypress has nothing to do with SSR. So in this case I ended up with creating new testing backend server which runs in cloud.

[gvocale]

I managed successfully to do it via Mock Service Worker