GraphQL variable not working.

[gajrajantino]

I am using this query.

    query getSku($take: Int!, $skip: Int!) {
        data
    }

I am calling this like this.

const { loading, error } = useQuery(getSku, {
        onCompleted: (data) => {
            console.log(data);
        },
        onError: (err) => {
            console.error(err);
        },
        variables: {
            take: 10,
            skip: 0,
        },
    });

This is my handlers.js file.

graphql.query("getSku", (req, res, ctx) => {
        const { take, skip } = req.variables;

        console.log(req);

        [...Array(20)].map(() => db.sku.create());

        return res(
            ctx.data({
                data: db.sku.findMany({
                    sort: {
                        skuLength: "asc",
                    },
                    take,
                    skip,
                }),
            })
        );
    }),

The value of req.variables is {}, I am not sure why. I cant debug this, please help me. I have already searched in the documentation about this variables and it doesnt work.
Thank you :)

[kettanaito]

Hey, @gajrajantino. I'm sorry you're experiencing this issue.

Could you please prepare a small reproduction repository where I could look into it? From your code, everything looks okay. We've got automated tests around GraphQL variables passing as well, so it may be something contextual around your use case. I'd love to look into that.

[gajrajantino]

Hey thanks for your reply,

Please use this - https://github.com/gajrajantino/msw-test

[gajrajantino]

Hi, were you able to find a solution ?

[kettanaito]

If you take a look at the Network tab and inspect the request you're making, you will see that there are no variables being sent by Apollo:

If there are no variables in the original request, then MSW cannot possibly know about them. For all the library cares, the variables were intentionally empty.

The issue here is in how you're using your $take and $skip variables. Looks like Apollo does some query sanitization and if you're not using your variables anywhere in your query, they will be removed. To fix this, forward your variables to any of the fields of your query:

const getSku = gql`
  query getSku($take: Int!, $skip: Int!) {
+   data
-   data(take: $take, skip: $skip)
  }
`

With this change applied, you can now see that variables are an object with the take and skip keys in the formed request:

And so your handler can now expose the req.variables as well:

// src/mocks/handlers.js
export const handlers = [
  graphql.query('getSku', (req, res, ctx) => {
    const { take, skip } = req.variables

    console.log(take) // "10"
    console.log(skip) // "0"
  })
]

[gajrajantino]

Thank you !!

Another thing I am wondering was whether the library can persist the database? Or can I create like 100 rows on initilisation, and then use the same for CRUD and filter operations (across requests)?