How to add local only fields for interface type Objects?

[Hemistone]

I'm working on a Chat Application which have several types of Messages.
Our graphql schema is defined as below. (we call a chat as 'counsel' in this project)

interface Message {
  id: ID!
  author: User!
  counsel: Counsel!
  createdAt: DateTime!
}
type TextMessage implements Message {
  id: ID!
  author: User!
  counsel: Counsel!
  createdAt: DateTime!
  body: String!
}
type FileMessage implements Message {
  id: ID!
  author: User!
  counsel: Counsel!
  createdAt: DateTime!
  file: File!
}
type ShopMessage implements Message {
  id: ID!
  author: User!
  counsel: Counsel!
  createdAt: DateTime!
  shop: Shop!
}
type InvoiceMessage implements Message {
  id: ID!
  author: User!
  counsel: Counsel!
  createdAt: DateTime!
  order: Order!
}
# etc...

For the frontend react application, I wanted to add local only field status on Message interface to control UI of message sending status.

Expected Behavior

// src/utils/cache.ts
// use local only 'status' field on every type of Messages!
export const typeDefs = gql`
  enum MessageStatus {
    PENDING
    SENT
    FAILED
  }
  extend interface Message {
    status: MessageStatus!
  }
`;

When I run graphql codegenerator after writing code as above, it gave me Error log as below.

    Error: Type EndWarningMessage must only implement Interface types, it
 cannot implement Message.

    Type EnterMessage must only implement Interface types, it cannot impl
ement Message.

    Type FileMessage must only implement Interface types, it cannot imple
ment Message.

    Type InvoiceMessage must only implement Interface types, it cannot im
plement Message.

    Type LeaveMessage must only implement Interface types, it cannot impl
ement Message.

    Type RestartMessage must only implement Interface types, it cannot im
plement Message.

    Type ShopMessage must only implement Interface types, it cannot imple
ment Message.

    Type TextMessage must only implement Interface types, it cannot imple
ment Message.

What I had to do to work

After reading Error log and trying several times, I've succeed to let Application work, but I had to add status field for every implemented Message types as described below.

// src/utils/cache.ts
export const typeDefs = gql`
  enum MessageStatus {
    PENDING
    SENT
    FAILED
  }
  extend type TextMessage {
    status: MessageStatus!
  }
  extend type FileMessage {
    status: MessageStatus!
  }
  extend type ShopMessage {
    status: MessageStatus!
  }
  extend type InvoiceMessage {
    status: MessageStatus!
  }
`;

Question

Is there any cool way to extend my Message interface, which can add my status field to every type of Messages at once?

[dylanwulf]

This is more of a limitation with GraphQL itself rather than Apollo Client. Even on the backend when defining the schema, each type must repeat all the fields specified by the interface. Same deal when extending the schema on the frontend.

[benjamn]

Although there may not be a cool/quick/easy way to express this inheritance relationship in your schema, InMemoryCache does support inheritance of type and field policies (see #7065), provided you specify possibleTypes:

new InMemoryCache({
  possibleTypes: {
    Message: [
      "TextMessage",
      "FileMessage",
      "ShopMessage",
      "InvoiceMessage",
    ],
  },
  typePolicies: {
    Message: {
      fields: {
        status: ..., // configure Message.status field once for all subtypes
      },
    },
  },
})

If you go down this path, you will probably want to generate possibleTypes from your schema at build time. However, nothing is stopping you from trying out this functionality with manually-provided possibleTypes.

If you find yourself writing possibleTypes manually rather than generating them programmatically, you might also find it useful that the subtype strings allow regular expression syntax (since #6901):

new InMemoryCache({
  possibleTypes: {
    // Make Message a supertype of any type ending with "Message":
    Message: ["\\w+Message"],
  },
  typePolicies: {
    Message: {
      fields: {
        status: ..., // configure Message.status field once for all subtypes
      },
    },
  },
})

This fuzzy subtype matching tends to be less useful once you stop writing possibleTypes by hand, but you asked for "cool" and I think this qualifies?

In addition to enabling policy inheritance, possibleTypes is also used to determine whether fragment SomeFragment on SomeType matches the on SomeType constraint. You can find more details in the documentation.

[Hemistone]

@benjamn I've tried your solution since we are already using possibleTypes, but it does not work since typeDef does not matches with typePolicies.
Isn't the apollo client also need corresponding type definition in typeDef for cache-only fields in typePolices? Or maybe it could not be worked since we are using graphql-codegen.

(Additional comment for more information)

new InMemoryCache({
  possibleTypes: {
    Message: [
      "TextMessage",
      "FileMessage",
      "ShopMessage",
      "InvoiceMessage",
    ],
  },
  typePolicies: {
    Message: {
      fields: {
        status: ..., // Q: What's the corresponding apollo client's `typeDef` for this field?
      },
    },
  },
})

[benjamn]

@Hemistone I believe GCG is able to generate typed typePolicies via StrictTypedTypePolicies, though I haven't tried it myself, so I'd be interested to hear how it goes!

[jpvajda]

I'm going to close this one out as this issue had a response to help the reported problem.