在 apollo react 客户端中使用 graphql 片段答案

【问题标题】：Using graphql fragments in apollo react client在 apollo react 客户端中使用 graphql 片段
【发布时间】：2023-03-19 23:55:01
【问题描述】：

我正在构建一个反应原生应用程序（使用打字稿），其中我使用@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)"
          ]
        }
      }
    }
  ]

非常感谢任何帮助，在此先感谢您！

【问题讨论】：

标签： reactjs typescript react-apollo apollo-client graphql-js

【解决方案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}
`;

【讨论】：