Got "No more mocked responses for the query" error when using fragment

[msickpaler]

trafficstars

I got ApolloError: No more mocked responses for the query error. But I implement query with correct values.

this is my query.

import { gql } from "@apollo/client";

import { ColumnFragment } from "./fragment/ColumnFragment";

export const FETCH_DICTIONARY_DETAIL = gql`
  ${ColumnFragment}
  query fetchDictionaryDetail($id: ID!) {
    dictionary(id: $id) {
      id
      title
      createdAt
      updatedAt
      dictionaryColumns {
        ...ColumnFragment
      }
      novel {
        id
        dictionarySelections {
          id
          title
        }
      }
    }
  }
`;

fragment

import { gql } from "@apollo/client";

export const ColumnFragment = gql`
  fragment ColumnFragment on DictionaryColumn {
    id
    title
    type
    createdAt
    updatedAt
  }
`;

story

const dictionaryId = "1";
const novelId = "1";

export const Default: Story = {
  parameters: {
    nextjs: {
      router: {
        query: {
          novelId,
          dictionaryId,
        },
      },
    },
    apolloClient: {
      mocks: [
        {
          request: {
            query: FETCH_DICTIONARY_DETAIL,
            variables: {
              id: dictionaryId,
            } satisfies FetchDictionaryDetailQueryVariables,
          },
          result: {
            data: {
              __typename: "Query",
              dictionary: {
                __typename: "Dictionary",
                id: dictionaryId,
                title: "test title",
                dictionaryColumns: [
                  {
                    __typename: "DictionaryColumn",
                    id: "1",
                    title: "test title",
                    type: "TEXT",
                    createdAt: "2021-09-10T15:00:00.000Z",
                    updatedAt: "2021-09-10T15:00:00.000Z",
                  },
                ],
                novel: {
                  __typename: "Novel",
                  id: novelId,
                  dictionarySelections: [],
                },
                createdAt: "2021-09-10T15:00:00.000Z",
                updatedAt: "2021-09-10T15:00:00.000Z",
              },
            } satisfies FetchDictionaryDetailQueryHookResult["data"],
          },
        },
      ],
    },
  },
};

.storybook/preview.tsx

const preview: Preview = {
  parameters: {
    apolloClient: {
      MockedProvider,
      defaultOptions: {
        watchQuery: {
          fetchPolicy: "no-cache",
        },
        query: {
          fetchPolicy: "no-cache",
        },
      },
    },
  },
};

I got this error:

ApolloError: No more mocked responses for the query: query fetchDictionaryDetail($id: ID!) {
  dictionary(id: $id) {
    id
    title
    createdAt
    updatedAt
    dictionaryColumns {
      id
      title
      type
      createdAt
      updatedAt
      __typename
    }
    novel {
      id
      dictionarySelections {
        id
        title
        __typename
      }
      __typename
    }
    __typename
  }
}
Expected variables: {"id":"1"}

If I replace Fragment with hard coding like below, it's working.

import { gql } from "@apollo/client";
export const FETCH_DICTIONARY_DETAIL = gql`
  query fetchDictionaryDetail($id: ID!) {
    dictionary(id: $id) {
      id
      title
      createdAt
      updatedAt
      dictionaryColumns {
        id
        title
        type
        createdAt
        updatedAt
      }
      novel {
        id
        dictionarySelections {
          id
          title
        }
      }
    }
  }
`;

what's the problem?

Thanks for Great library and your efforts.

[bignimbus]

Hi @msickpaler 👋🏻 thanks for letting us know about this! What version of @apollo/client are you using?

[msickpaler]

@bignimbus Hi! i use below. apollo/client 3.7.10

additional info

react 18.2.0 next 13.2.3 storybook 7.5.3 @storybook/react 7.5.3 @storybook/nextjs 7.5.3 storybook-addon-apollo-client 5.0.0

[bignimbus]

Hi @msickpaler 👋🏻 we took a look at this briefly in our team meeting and it looks like this could be a bug. We'll try to reproduce this on our end but it would expedite things if you have a runnable reproduction we could use. Thanks a bunch!