Why does subscribeToMore don't allow for different variables from the query variables?

[AndresRodH]

I'm working with react-apollo in TS and find it frustrating that I can't add a generic type for variables to the subscribeToMore function, but I can pass TSubscriptionData. I'm designing subscriptions that are very generic and top-level. Take this hypothetical schema

enum Operation {
  CREATE
  UPDATE
}

type Post {
  id: ID!
  authorId: ID!
  text: String!
}

type PostSubscriptionPayload {
  id: ID!
  operation: Operation!
  post: Post!
}

type Subscription {
  post(id: String, operation: Operation): PostSubscriptionPayload
}

type Query {
  allPosts(authorId: ID): [Post!]!
}

Now, I would like to implement a custom component that could be used to query all posts or all posts by an author

type Post = { id: string, authorId: string, text: string }
type Feed = { allPosts: Post[] }
type FeedVariables = { authorId?: string | null }
type FeedQueryProps = Omit<QueryProps<Feed, FeedVariables>, 'query'>

const FEED =  gql`
  query Feed($authorId: String) {
    allPosts(authorId: $authorId) {
      id
      text
      authorId
    }
  }
`

const FeedQuery: React.FC<FeedQueryProps> = props => (
  <Query<Feed, FeedVariables> 
    query={FEED}
    {...props}
  />
)

I would like to subcribe to posts using the subscribeToMore function here. The subscribeToMore function is typed like this in apollo-client:

subscribeToMore<TSubscriptionData = TData>(options: SubscribeToMoreOptions<TData, TVariables, TSubscriptionData>): () => void;

This makes it possible to give a the type to the response, which I would expect is an object with id, operation and post as properties. The implementation allows for the post subscription to be treated as a catch-all if there is no particular operation or a listener for a single event. However, if I try to do the following, it will complain because the variables type is not compatible.

// subscription document
const FEED_MASTER_SUBSCRIPTION = gql`
  subscription FeedMasterSubscription($authorId: String, $operation: Operation) {
    post(authorId: $authorId, operation: $operation) {
      id
      text
      authorId
    }
  }
`
type FeedSubscriptionPayload = {
  id: string
  operation: 'CREATE' | 'UPDATE'
  post: Post
}

export const AuthorPosts = () => (
  <FeedQuery>
    {({ subscribeToMore }) => {
      // I want this to be a catch-all for creates and updates
      const subscribeToPostUpdate = () =>
        subscribeToMore<FeedSubscriptionPayload>({
          document: FEED_MASTER_SUBSCRIPTION,
          variables: {
            // ✅this would pass because it's part of FeedVariables
            authorId: 'some-author-id',
          },
        })
      
      return <SomeComponent subscribeToPostUpdate={subscribeToPostUpdate} />
    }}
  </FeedQuery>
)

export const Home = () => (
  <FeedQuery>
    {({ subscribeToMore }) => {
      // I only want to merge new posts
      const subscribeToPostCreate = () =>
        // NOTE: I can ONLY pass the shape of the subscription data here
        subscribeToMore<FeedSubscriptionPayload>({
          document: FEED_MASTER_SUBSCRIPTION,
          variables: {
            // ❌Type '{ operation: string; }' is not assignable to type 'FeedVariables'.
            // Object literal may only specify known properties, and 'operation' does not exist in type
            // 'FeedVariables'
            operation: 'CREATE',
          },
        })
      
      return <SomeComponent subscribeToPostCreate={subscribeToPostCreate} />
    }}
  </FeedQuery>
)

Is there a reason why clients are not allowed to pass custom variables as well? Is there a better option than casting subscribeToMore to utilize my subscription without having to make individual subscriptions for every possible operation?

[email protected]
[email protected]

[audiolion]

Im running into this same issue

[timhwang21]

I've run into this as well, and filed a PR for it. Would be great to have this fixed!

[AndresRodH]

@timhwang21 awesome! You mind posting a link for the PR so I can follow it?

EDIT: PR #4608

[hwillson]

Please try a recent version of @apollo/client and let us know if this issue is still happening. Thanks!