Using apollo subscribeToMore with different results for subscription - reactjs

Question

GET_USERS returns users: []string
export const GET_USERS= gql`
query AllUsers{
users
}
`;
GET_USERS_SUBSCRIPTION returns user: string
export const GET_USERS_SUBSCRIPTION= gql`
subscription AllUsersUpdater{
user
}
`;
It seems like apollo expects the subscribeToMore to be of the exact same result type. I know I can update the result to also be []string, but that seems so unnecessary for what I want to do.
const { subscribeToMore } = useAllUsersQuery({});
useEffect(() => {
subscribeToMore({
document: GET_USERS_SUBSCRIPTION,
updateQuery: (prev, { subscriptionData }) => {
if (!subscriptionData.data) {
return prev;
}
const user= subscriptionData.data.user;
if (prev.users.find((u) => u === user)) {
return prev;
}
return Object.assign({}, prev, {
users: [user, ...prev.users],
});
},
});
}, []);
Is there any way to use subscribeToMore with a different subscription type?
Also, is subscribeToMore the best way to handle this? Could I just bundle the two and just have the subscription return past results prior to returning new ones?

Answer 1

The subscribeToMore as defined here https://github.com/apollographql/apollo-client/blob/a3aefcb310ea1451ee494077cbde98171169d8d0/src/core/ObservableQuery.ts#L502-L505 used the TSubscriptionData = TData type parameter to set the expected type which defaults to TData.
You need to specify the parameter to override the default.
In your specific example this would look something like this
const { subscribeToMore } = useAllUsersQuery({});
useEffect(() => {
subscribeToMore<{user: string}>({
document: GET_USERS_SUBSCRIPTION,
updateQuery: (prev, { subscriptionData }) => {
if (!subscriptionData.data) {
return prev;
}
const user= subscriptionData.data.user;
if (prev.users.find((u) => u === user)) {
return prev;
}
return Object.assign({}, prev, {
users: [user, ...prev.users],
});
},
});
}, []);