Использование фрагментов graphql в клиенте реакции аполлона

Я создаю приложение для реагирования (используя машинописный текст), в котором я использую @apollo/client v3. У меня есть много мутаций и запросов, которые возвращают один и тот же тип, и я всегда хочу получать одни и те же поля. Таким образом, я придумал следующую структуру для определений схемы (в клиенте):

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

gql`
  fragment ConversationFragment on Conversation {
    roomId
    name
    isDirect
    participants {
      id
      isAdmin
      isCreator
      membership
    }
    imageBlurhash
    eventIds {
      eventId
    }
  }
`;

export const MUTATE_CONVERSATION_DIRECT_INITIATE = gql`
  mutation conversationDirectInitiate($participantId: UUID!) {
    conversationDirectInitiate(participantId: $participantId) {
      ...ConversationFragment
    }
  }
`;

export const MUTATE_CONVERSATION_DIRECT_DELETE = gql`
  mutation conversationDirectDelete($conversationId: UUID!) {
    conversationDirectDelete(conversationId: $conversationId) {
      delete
      conversation {
        ...ConversationFragment
      }
    }
  }
`;

... many more mutation and queries like the one above

Как видите, я стараюсь не перепечатывать возвращаемые поля. Может быть, есть и другой способ добиться этого результата?

Однако сервер отвечает ошибкой:

{
  "errors": [
    {
      "message": "Unknown fragment \"ConversationFragment\".",
      "locations": [
        {
          "line": 3,
          "column": 8
        }
      ],
      "extensions": {
        "code": "GRAPHQL_VALIDATION_FAILED",
        "exception": {
          "stacktrace": [
            "GraphQLError: Unknown fragment \"ConversationFragment\".",
            "    at Object.FragmentSpread (/node_modules/graphql/validation/rules/KnownFragmentNames.js:29:29)",
            "    at Object.enter (node_modules/graphql/language/visitor.js:324:29)",
            "    at Object.enter (node_modules/graphql/language/visitor.js:375:25)",
            "    at visit (node_modules/graphql/language/visitor.js:242:26)",
            "    at Object.validate (node_modules/graphql/validation/validate.js:73:24)",
            "    at validate (node_modules/apollo-server-core/src/requestPipeline.ts:513:14)",
            "    at Object.<anonymous> (node_modules/apollo-server-core/src/requestPipeline.ts:296:32)",
            "    at Generator.next (<anonymous>)",
            "    at fulfilled (node_modules/apollo-server-core/dist/requestPipeline.js:5:58)",
            "    at processTicksAndRejections (internal/process/task_queues.js:97:5)"
          ]
        }
      }
    }
  ]

Любая помощь приветствуется, заранее большое спасибо!

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
1 241
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Интерполируйте фрагмент, который вы хотите использовать в конце каждого документа.

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

const CONVERSATION_FRAGMENT = gql`
  fragment ConversationFragment on Conversation {
    roomId
    name
    isDirect
    participants {
      id
      isAdmin
      isCreator
      membership
    }
    imageBlurhash
    eventIds {
      eventId
    }
  }
`;

export const MUTATE_CONVERSATION_DIRECT_INITIATE = gql`
  mutation conversationDirectInitiate($participantId: UUID!) {
    conversationDirectInitiate(participantId: $participantId) {
      ...ConversationFragment
    }
  }
  ${CONVERSATION_FRAGMENT}
`;

export const MUTATE_CONVERSATION_DIRECT_DELETE = gql`
  mutation conversationDirectDelete($conversationId: UUID!) {
    conversationDirectDelete(conversationId: $conversationId) {
      delete
      conversation {
        ...ConversationFragment
      }
    }
  }
  ${CONVERSATION_FRAGMENT}
`;

Другие вопросы по теме