Graphql with axios

[BernardA]

This is more of a question that an issue per se.

I have a Next js app that uses graphql to communicate with the API - both my own API and Wordpress'.

In both cases no graphql client like Apollo is used.

Instead I use axios to make the query or mutations, like in the instance below:

At /pages/brands:

  import { apiQl } from 'lib/functions';
  .....

   const Brands = ({ brands }) => {

    .......
   };


     const queryQl = `query getBrandsModels {
            brands(
                  isActive: true
                 _order: {brand: "ASC"}
          ) {
              id
              brand
              models(
                 isActive: true
                _order: {model: "ASC"}
             ){
                 id
                 model
         }
      }
    }`;

    export async function getServerSideProps() {
         const data = await apiQl(queryQl, null, false);
         return {
              props: {
                    brands: data.data.brands,
             },
          };
      }

Where apiQl is like:

     export const apiQl = (data, variables = null, isForage = null) => {
           return axios
                .post(process.env.NEXT_PUBLIC_API_GRAPHQL_URL, {
                    query: data,
                   variables,
                })
             .then((response) => {
                  return response.data;
            });
  };

This serves my purposes quite well.

I have all the app state managed with redux and certainly see no reason to add a tool like Apollo client.

I have not been able to make msw work with my API setup and was wondering if it is possible at all without installing the grapqhql clients you prescribe which, as said, I have no reason to use otherwise.

If it is possible with my API setup, please indicated how.

Thanks

[kettanaito]

Hey, @BernardA.

The beauty of MSW is that it's agnostic of your request-issuing setup. All you have to do is to declare a query name that you wish to intercept and describe how to mock its response.

import { graphql } from 'msw'

const handlers = [
  graphql.query('getBrandsModels', (req, res, ctx) => {
    return res(
      ctx.data({
        brands: [
          {
            id: 1,
            brand: 'Lego',
            models: [
              {
                id: 2,
                model: 'Porsche',
              },
            ],
          },
        ],
      })
    )
  }),
]

If you wish, you can scope the queries intercepted to a specific endpoint by using graphql.link:

import { graphql } from 'msw'

const myService = graphql.link(process.env.NEXT_PUBLIC_API_GRAPHQL_URL)

const handlers = [
  myService.query('getBrandsModels', (req, res, ctx) => {
    // The mocked response as described above.
  }),
]

You then use the handlers above for both browser and Node.js integrations.

Let me know if you have any more questions or find this setup not working for you.

[BernardA]

I appreciate you taking the time to assist on this.

I have created a repository with the code and it is available here.

After further reading your docs I could not find anything that would indicate where the problem might be. So I am at a bit of a loss here.

Should you need to consult the API schema, it is available publicly at www.soeezauto.com/api/graphql.

[kettanaito]

I'll take a look at the repository and let you know in this thread. Thanks for preparing it.

[kettanaito]

After looking into your repository I’ve found a couple of issues:

1. You weren’t using the latest version of the msw package. The latest one is 0.35.0. Always run npm i msw@latest when in doubt.
2. The test run threw an error coming from your <Brands/> component:

Warning: Failed prop type: The prop `brands` is marked as required in `Brands`, but its value is `undefined`.
        at Brands (/Users/kettanaito/Projects/contrib/msw-879-graphql-match/src/pages/brands/index.js:56:19)

As the warning suggests, you weren’t passing the required brands prop when rendering the <Brands/> component in your test. I suspect anything can go wrong if you don’t provide components with the props they expect. I’ve removed .isRequired from its prop type and continued.
3. You make the GraphQL request in the getServerSideProps hook of NextJS. That hook is not executed when you’re rendering <Brands/> in isolation (like you should do in the integration test).

If you wish to test the logic in the getServerSideProps hook, you need to do so in an end-to-end test. This implies running your page (not a single component) in a browser, which will execute all the server-side hooks of NextJS accordingly.

NextJS is currently working on the official testing guidelines, so you may be able to test components with server-side hooks an in integration test. That is not possible now, however. Keep an eye on the NextJS announcements regarding this.

Take a look at the NextJS usage example to see how to set up MSW so that it’d intercept requests in server-side hooks like getServerSideProps. This setup needs to be done on the NextJS side, not in your tests. You should still use MSW as you do in your integration tests, just keep in mind what scope of the components you’re testing.

That being said, there’s a current limitation when it comes to controlling mocks on the server-side. NextJS runs a server in a separate process, so you cannot change the mocks you’ve declared on test runtime. This may not be an issue for you, but it’s worth mentioning. We’re pursuing the effort to create a recommended approach in #799 but it’s still in progress.

[BernardA]

I was quite aware I was not passing the props. I was assuming msw would intercept the request on getServerSideProps and pass it on. If you look at one of my comments above I had shown the error of the missing brands prop.

That what is suggested by this Next js official example as well.

That example clearly states that // Server-side requests are mocked bymocks/server.js` which I have replicated on my code

If msw cannot handle that, than I certainly misunderstood its utility in this case and overall when testing Next js. As a rule I will always make all request necessary to render pages and their initial components on getServerSideProps or 'getStaticProps`, ie, at page level.

Doing otherwise would be wasting one of the big benefits of a tool like Next js.

Only when responding to an user action would a request originate at component level.

But then, as you suggested, I would be better off testing end to end with a tool like Cypress.

Thanks again for your assistance

[kettanaito]

I was assuming msw would intercept the request on getServerSideProps and pass it on.

MSW can not do that because getServerSideProps is not called when you test your component like that. It's called internally by NextJS that runs your app, which doesn't happen when testing components in isolation. Emphasizing that this has nothing to do with MSW. You're trying to test something that's not executed.

Once again, server-side requests are mocked and function properly in the NextJS example. You need to understand that statement relates to End-to-End execution of your application. You're not running the entire NextJS app in your test.

I think you misunderstood my explanation completely. Your issue has nothing to do with MSW or its ability to intercept requests. When you render your component in isolation in a test like this:

render(<Component/>)

You're extracting this component, isolating it, and effectively dropping any logic that lives outside of its scope (like getServerSideProps). The issue is you trying to test server-side interaction that's invoked by NextJS server in an integration test where there's no such server. For the lack of a better approach from NextJS team at the moment, you need to run your component on a page in a real browser to have methods like getServerSideProps be called.

When you do run your page in a browser, you can use MSW to intercept any requests, be it client-side or server-side, as long as you have it set up as shown in the NextJS usage example.