Consider this, query log (array of strings) and subscribing to new messages (incoming as single string):
interface LogQueryData {
log: string[];
}
// there is no place in useQuery to use this type
interface LogSubscriptionData {
newLogMessage: string;
}
const logQuery = gql`
query Log {
log
}
`;
const logSubscription = gql`
subscription Log {
newLogMessage
}
`;
export const LogPage = () => {
const {name} = useParams();
const {loading, error, data, subscribeToMore} = useQuery<LogQueryData>(logQuery);
useEffect(() => {
subscribeToMore({
document: logSubscription,
updateQuery: (prev, {subscriptionData}) => {
if (!subscriptionData.data) return prev;
return {
...prev,
log: [
...prev.log,
// !!! line below is marked as error
// because suscriptionData is of type LogQueryData
subscriptionData.data.newLogMessage
]
}
}
})
}, [subscribeToMore]);
if (loading || error) {
return null;
}
const {log} = data!;
return (
<div>
{log.map((message) =>
<div>{message}</div>
)}
</div>
);
}
Intended outcome:
To be able to specify type of subscriptionData
Actual outcome:
useQuery accept only two generic types TData and TVariables and TData is used for subscriptionData as well, but actually it can be different.
You can call it like bellow
subscribeToMore<SomeSubscription, SomeSubscriptionVariables>({
...
})
Most helpful comment
You can call it like bellow