Using graphql fragments in apollo react client

Question

I am building a react native application (using typescript) in which I use the @apollo/client v3. I have many mutation & queries which all return the same type and I always want to receive the same fields. Thus I came up with the following structure for the schema definitions (in the client):

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

As you can see I try to avoid to retype the fields to return. Maybe there is also a different way to achieve this outcome?

However, the server responds with an error:

{
  "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)"
          ]
        }
      }
    }
  ]

Any help is greatly appreciated, thank you so much in advance!

Answer 1

Interpolate the fragment you want to use in the end of each document.

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}
`;