Get types for inline fragments

[ThomasKientz]

Hi,

What am I missing to get this properly typed ?

export const createOnboarding = async () => {
  const query = graphql(`
    mutation MyQuery {
      onboardCompanyAccountHolder(
        input: { companyType: Company, isRegistered: true, accountName: "12 rue" }
      ) {
        ... on OnboardCompanyAccountHolderSuccessPayload {
          onboarding {
            id
          }
        }
      }
    }
  `);

  const { data } = await swanApi.mutation(query, {});

  return data?.onboardCompanyAccountHolder.onboarding.id; //  TS error : Property 'onboarding' does not exist
                                                                                 
};

[JoviDeCroock]

That info is a bit insufficient but I'll assume that the field you are spreading a fragment on is abstract. In that case you need to narrow the type by doing __typename === typeCondition

[ThomasKientz]

Sorry for the lack of context, but I am new to graphQl. I can run the query on the playground (screenshot), I don't know really know what is an abstract fragment. What information can I provide ? What do you mean by "doing __typename === typeCondition" ?

[ThomasKientz]

I don't really know whats the field I am spreading on is. Here is what the documentation says

Consider the following example, which calls the mutation updateAccount to update the account's language. Note the ... on UpdateAccountSuccessPayload, in which you can choose to return the account's language in the payload. Swan recommends adding validations systematically, as well as rejections.

[JoviDeCroock]

The fact that you are using an inline-fragment ... on X here is because onboardCompanyAccountHolder is returning an abstract type which is either the success or error variant. You are asking it to show you the success variant and for errors you won't receive anything.

Now TypeScript ofcourse knows that this can have two variants so you'll have to narrow the type by doing the following

    mutation MyQuery {
      onboardCompanyAccountHolder(
        input: { companyType: Company, isRegistered: true, accountName: "12 rue" }
      ) {
        __typename ## notice this, this can be OnboardCompanyAccountHolderSuccessPayload or the error variant
        ... on OnboardCompanyAccountHolderSuccessPayload {
          onboarding {
            id
          }
        }
      }
    }

NOw if you do this in TS

if (data.onboardCompanyAccountHolder.__typename === 'OnboardCompanyAccountHolderSuccessPayload')

The type will be narrowed, if you would hover the onboardCompanyAccountHolder it would have shown you this in the hover-information as well as it would show two objects one with OnboardCompanyAccountHolderSuccessPayload and one with the error variant.

When I do CMD + Enter on the TypeCondition of that fragment I see all possible types that can be returned for said abstract type:

[ThomasKientz]

Okay, got it. That makes total sense. Thanks a lot!