amplify-js: Property 'subscribe' does not exist on type 'Promise>'. TS2339

Hi,

The API.graphql return types were improved by #9197 , the PR has some information on how to use it, but in summary, there are two new types you can import and pass to hint the compiler of your intent (GraphQLQuery and GraphQLSubscription)

import { GraphQLSubscription, GraphQLQuery } from "@aws-amplify/api";

const res = await API.graphql<GraphQLQuery<MyType>>({ query: 'query' }); // GraphQLResult<MyType>
const res2 = API.graphql<GraphQLSubscription<MyType>>({ query: 'query' }); // Observable<GraphQLResult<MyType>>

Any updates on this? The casting used to work (on older applications) however, now I get

Conversion of type 'Promise<GraphQLResult<any>> | Observable<object>' to type 'Observable<object>' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Type 'Observable<object>' is missing the following properties from type 'Observable<object>': concat, [Symbol.observable]

How do we get around it?

We’ve added TS docs on how you can specify the type and the generic type parm for subscriptions here: https://docs.amplify.aws/lib/graphqlapi/subscribe-data/q/platform/js/#using-amplify-graphql-client

If you’re writing your own GraphQL subscription query (as opposed to using one of the Amplify-generated queries), you can do the following:

import { API, graphqlOperation } from 'aws-amplify';
import type { GraphQLSubscription } from '@aws-amplify/api';

type OnCreateTodo = {
  onCreateTodo?:  {
    id: string,
    name: string,
    description?: string | null,
  } | null,
};

const ON_CREATE_TODO = /* GraphQL */ `
  subscription OnCreateTodo {
    onCreateTodo {
      id
      name
      description
    }
  }
`;

const sub = API.graphql<GraphQLSubscription<OnCreateTodo>>(
  graphqlOperation(ON_CREATE_TODO)
).subscribe({
  next: ({ provider, value }) => console.log({ provider, value }),
  error: (error) => console.warn(error)
});

That being said, as Jim pointed out above, we’re currently working on improving and simplifying TS support for Amplify JS. But hopefully this gets folks unblocked for the time being.

if you are trying to make a subscription, you need to narrow down the type to an observable since it can be a promise or an observable. You can do what with the typescript Exclude utility

API.graphql(graphqlOperation(yourOperation)) as Exclude<
        ReturnType<typeof API.graphql>,
        Promise<any>
      >
    ).subscribe({
      next: ({ value }: { value: unknown }) => console.log('value', value),
      error: (error: unknown) => console.log('error', error),
    });

I had to cast it as an Observable:

import {Observable} from "zen-observable-ts";
const observable = GraphQLAPI.graphql(graphqlOperation(XXXXX)) as Observable<any>;
observable.subscribe(...)

I had to cast it as an Observable:

import {Observable} from "zen-observable-ts";
const observable = GraphQLAPI.graphql(graphqlOperation(XXXXX)) as Observable<any>;
observable.subscribe(...)

But this does not allow to unsubscribe.

Property 'unsubscribe' does not exist on type 'Observable<any>'. Did you mean 'subscribe'?ts(2551)

I had to cast it as an Observable:

import {Observable} from "zen-observable-ts";
const observable = GraphQLAPI.graphql(graphqlOperation(XXXXX)) as Observable<any>;
observable.subscribe(...)

This worked for me. I had to install the same version that was used in the amplify libraries though zen-observable-ts@0.8.19

for amplify version 6 i was able to get it to work with GraphQLSubscription and Subscription

import { Amplify } from "aws-amplify";
import type { Subscription } from "rxjs";
import { generateClient, GraphQLSubscription } from "aws-amplify/api";

const client = generateClient();

interface IChatResponseSubscription {
  subscribe: {
    sender: string;
    conversation_id: string;
    content: string;
  };
}

const chatResponseSubscriptionQuery = /* GraphQL */ `
  subscription ChatResponseSubscription($conversation_id: String!) {
    subscribe(conversation_id: $conversation_id) {
      content
      conversation_id
      sender
    }
  }
`;
const subscribeRef = useRef<Subscription | null>(null);

useEffect(() => {
  const subscribeToChatResponse = async (conversationId: string) => {
    try {
      const subscribe = client
        .graphql<GraphQLSubscription<IChatResponseSubscription>>({
          query: chatResponseSubscriptionQuery,
          variables: {
            conversation_id: conversationId,
          },
        })
        .subscribe({
          next: (value) => {
            handleResponseSubscription(value.data);
          },
          error: (error) => console.warn(error),
        });

      subscribeRef.current = subscribe;
    } catch (error) {
      const errorMsg = "Error retrieving response";
      console.log(conversationId, errorMsg);
    }
  };

  if (conversationId) {
    subscribeToChatResponse(conversationId);
  }

  return () => {
    if (subscribeRef?.current) {
      subscribeRef?.current?.unsubscribe();
    }
  };
}, [conversationId, handleResponseSubscription]);

Having the same problem, not sure how to take advantage from those new GraphQLQuery and GraphQLSubscription types mentioned by @manueliglesias , I ended up doing below (type cast as any), my subscription still seems working ok:

  subscription.value = (API.graphql(graphqlOperation(
    SUBSCRIBE_USER,
    { id: userId }
  )) as any).subscribe({ next: onSubscribe })
// . . .
  (subscription.value as any).unsubscribe()

I was able to resolve this by wrapping the subscription in an async function in my useEffect, I was not getting the correct auto completion typing but I also was not getting errors. I was able to get the value return typed via a custom type that used the type generated by codegen

type SubscriptionValue = {
  value: {
    data: OnUpdateGoalSubscription;
  };
};
export default function GoalPage({ goal }: { goal: GoalType }) {

  const [currentGoal, setCurrentGoal] = useState<GoalType>(goal);

  useEffect(() => {
    let subscription;
    const initSubscription = async () => {
      const user = await Auth.currentAuthenticatedUser();
      subscription = API.graphql({
        query: onUpdateGoal,
        variables: { owner: user.username },
      }).subscribe({
        next: ({ value }: SubscriptionValue) =>
          setCurrentGoal(value.data.onUpdateGoal),
        error: ({ error }) => console.warn(error.errors[0]),
      });
    };
    initSubscription();
    return () => {
      subscription.unsubscribe();
    };
  }, []);

This is what worked for me:

const onUpdateFileImportData = (await API.graphql({
          query: onUpdateFileImportDataSubscription,
          variables: {
            input: {
              id: fileImportDataId
            }
          }
        })) as Observable<OnUpdateFileImportDataSubscription>

I got OnUpdateFileImportDataSubscription from the ./src/API.ts file which is generated by running amplify codegen.

However, there seems to be a key missing as when I do this:

const subscription = onUpdateFileImportData.subscribe({
          next: (updatedFileImportDataRes: OnUpdateFileImportDataSubscription) => {
....

I get this error: Property 'value' does not exist on type 'OnUpdateFileImportDataSubscription'. when retrieving the updated record like so: const updatedFileImportDataId = updatedFileImportDataRes.value.data.onUpdateFileImportData.id

This is what the OnUpdateFileImportDataSubscription type looks like:

(alias) type OnUpdateFileImportDataSubscription = {
    onUpdateFileImportData?: {
        __typename: 'FileImportData';
        id: string;
        fileName?: string | null | undefined;
        totalImportedCourse?: number | null | undefined;
        newCourse?: number | null | undefined;
        coursesToResolve?: number | ... 1 more ... | undefined;
        ... 6 more ...;
        courseDatas?: {
            ...;
        } | ... 1 more ... | undefined;
    } | null | undefined;
}

A temporary fix is to change OnUpdateFileImportDataSubscription in the next function to any or create a custom type.

Is there any documentation anywhere on how to use Typescript with subscriptions? 😞