Question/issue with subscription and Typescript

[ChrisBagge]

I am not sure if this is an issue or just something I don't understand.

I have the following document

subscription newrec {
normalSubscription {
title
description
date
}
}

and the type

export type NewrecSubscription = (
{ __typename?: 'Subscription' }
& { normalSubscription: (
{ __typename?: 'Notification' }
& Pick<Notification, 'title' | 'description' | 'date'>
) }
);

and the following DocumentNode. I used graphql-codegen to generate my documents and types.

export const NewrecDocument: DocumentNode<NewrecSubscription, NewrecSubscriptionVariables> = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"subscription","name":{"kind":"Name","value":"newrec"},"variableDefinitions":[],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"normalSubscription"},"arguments":[],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"description"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"date"},"arguments":[],"directives":[]}]}}]}}]};

Running the subscription in the graphQL playground hosted on localhost port 4000/subscriptions (Svelte is running on port 5000) I get the following response after passing in a mutation

So far so good I think. The question I have relates to what I see when subscribing from my Svelte app. I would expect that the result would be in the same format as when I run a query. For instance the following query

query all {
recipes{
title
}
}

Returns

And I can get to using data.data.recipes and it correctly maps to the type generated from graphql-codegen, which looks like this

export type AllRecipesQuery = (
{ __typename?: 'Query' }
& { recipes: Array<(
{ __typename?: 'Recipe' }
& RecFragFragment
)> }
);

and the document looks like this

export const AllRecipesDocument: DocumentNode<AllRecipesQuery, AllRecipesQueryVariables> = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"allRecipes"},"variableDefinitions":[],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"recipes"},"arguments":[],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"recFrag"},"directives":[]}]}}]}},...RecFragFragmentDoc.definitions]};

Now for the specific issue I see when resolving the promise. Which does produce a printout red squiggly lines and all both to the log as I do in the first screen shot and to the web page from the second screenshot.

But why doesn't it map to my type, since this is very similar to the type for my query

Here is my call to subscription from within the script tag in my svelte component

NewrecSubscription is the subscription I posted earlier and the NewrecDocument is the document I posted.

const newrec = subscribe<any, any, NewrecSubscription>(client, {
query: NewrecDocument,
});

newrec.subscribe((result) => {
console.log(result);
let note: Notification;
Promise.resolve(result).then((result) => {
console.log(result.data.normalSubscription.title);
});

I am sure I haven't used the correct terminology in the above post, as I am still fairly new to all this, I hope I was still able to get my question across.
Thanks

[ChrisBagge]

I see this difference, the result from the query operation is like this

but the result from the subscription is like this

Do we need ApolloQueryResult around the subscription as well???

[timhall]

Sorry, not quite sure where to go with this, but give v0.4 a try and see if it has any improvement