nextjs intercept server side requests

[amirjr1378]

hi guys.
i want to intercept my getServerSideProps requests and mock it with my own data.
i use axios for requests.
can anyone help me to findout how ?

[osenvosem]

I'm also interested in this, how to intercept server requests.

[hect1c]

I was able to find some youtube links or articles suggesting different ways to be do this done by @bahmutov

https://www.youtube.com/watch?v=33Hq41O0bvU
https://glebbahmutov.com/blog/mock-network-from-server/
https://www.youtube.com/watch?v=xdVRVhUUgCI&feature=youtu.be

These should be helpful.

I was however wondering how, or what would be the best way to do this with Apollo Client and cy.intercept ? I've been unable to determine the best approach for this.

[Norfeldt]

@hect1c @amirjr1378 @osenvosem did you figure out a way to archive intercepting of getServerSideProps for cypress component testing?

(I added this question to stackoverflow as well https://stackoverflow.com/questions/70787370/cypress-component-testing-intercept-getserversideprops-requests)

[hello-rory]

I don't think there is a way to stub the actual server side network requests BUT you can stub the client page request and alter the response. It should look something like this:

export const mockServerSideProps = (pathname: string, props: Record<string, unknown>) => {
  cy.intercept("GET", `**${pathname}.json?**`, req => {
    req.reply(res => {
      res.body.pageProps = {
        ...res.body.pageProps,
        ...props,
      };
    });
  });
};

[JonJamesDesign]

I wrote a solution to this problem here: #28469 (comment)