Adding Mutation to Storybook

Help
,
1

I am using storybook with react and apollo. I got the following query that I want to use in storybook when filling out and sending a form:

export const CREATE_CUSTOMER_ADDRESS = gql`
    mutation CreateCustomerAddress($input: CustomerAddressInput!) {
        createCustomerAddress(input: $input) {
            id
        }
    }
`;

Now in my storybook story I have the following section:

...
Default.parameters = {
    apolloClient: {
        mocks: [
            {
                request: {
                    query: CREATE_CUSTOMER_ADDRESS
                },
                result: {
                    data: {}
                }
            }
        ]
    }
};

Using this I get the following kind of error, which I don’t understand:

Uncaught (in promise) Error: No more mocked responses for the query: mutation CreateCustomerAddress($input: CustomerAddressInput!) {
  createCustomerAddress(input: $input) {
    id
    __typename
  }
}

Expected variables: {"input":{"firstname":"Max","lastname":"Mustermann","street":"asdf","city":"asdf","postcode":"12345","telephone":"","country_code":"AI","default_shipping":false}}

Failed to match 1 mock for this query, which had the following variables:
  {}

    at new ApolloError (index.js:29:1)
    at Object.error (QueryManager.js:137:1)
    at notifySubscription (module.js:137:1)
    at onNotify (module.js:176:1)
    at SubscriptionObserver.error (module.js:229:1)
    at Object.error (asyncMap.js:32:1)
    at notifySubscription (module.js:137:1)
    at onNotify (module.js:176:1)
    at SubscriptionObserver.error (module.js:229:1)
    at iteration.js:4:1

Why is that and how can I fix it?

2

Yes. This is happening because you didn’t provide variables in your request.

You should use it like this:

request: {
                    query: CREATE_CUSTOMER_ADDRESS,
variables: { input:{firstname:"Max",lastname:"Mustermann",street:"asdf",city:"asdf",postcode:"12345",telephone:"",country_code:"AI",default_shipping:false} }

                },