CODEWITHSUNDEEP
graphqlapolloreact-apollostorybook
Flip
Flip

Reputation: 6761

How to fix "Uncaught Error: No more mocked responses for the query"

or

How to mock an Apollo/GraphQL query in Storybook, when query is used in child component?

I am trying to render a nextJS page component in Storybook. A child component of that page component is using a GraphQL query. I don't know if this is supposed to work at all, but when I mock that (child's) query in the story of the page component, I can see the mocked values in the console-like info section at the bottom of the screen in Storybook.

But I get an error:

Uncaught Error: No more mocked responses for the query: query GetSidebarInfos($clientId: ID!, $walletId: ID!) {
  client(id: $clientId) {
    fullName
    previousLoginAt
    __typename
  }
  wallet(id: $walletId) {
    state
    allowedToInvite
    allowedToBeInvited
    __typename
  }
}

I am not sure where the __typename comes from, but I have read about it and providing a value for it in the mocked response didn't change anything.

Is it at all possible to mock nested queries like that?

Upvotes: 0

Views: 1106

Answers (1)

Flip
Flip

Reputation: 6761

It turned out, that the problem was not that the query is happening in a child component. Looking at it from a testing perspective, this is obvious, but I didn't see it that way. The problem was that I had to make sure, that the arguments/variables with which the query is called match with those I provide in the mock. Again, obvious, but I just didn't see it.

Upvotes: 1

Related Questions