Typescript-operation: Return types of a Query not as seperate type

[danielleroux]

Hi,

iam using the typescript, typescript-operation and typescript-react-apollo plugin.

My Problem is the generation of the Operation query types:

query GetDeviceList {
  devices {
    id
    name
    description
    subDevices {
      type
      ... on SubDeviceA {
        a
      }
      ... on SubDeviceB {
        a
        b
      }
      ... on SubDeviceC{
        y
      }
    }
  }
}

export type GetDeviceList = {
  devices?: Maybe<
    Array<
      Pick<
        Device,
        "id" | "name" | "description"
      > & {
        subDevices?: Maybe<
          Array<
            Maybe<
              | Pick<
                SubDeviceA, "a" | "type"
                >
              | Pick<
                  SubDeviceB,
                  "a" | "b" | "type"
                >
              | Pick<
                  SubDeviceC,
                  "y" | "type"
                >
            >
          >
        >;
      }
    >
  >;
};

In my react component iam not able to direct access the "y"-property without casting.

const { data } = useGetDeviceList()

const subDeviceCs = data?.subDevices?.filter(d => d.type === SubDevice.TYPE_C);

// Rendering

{
 subDevicesCs.map(d => (<span>{ d?.y }</span>)).  // <=== Iam not able to access the property y
}

My current solution is to cast the subDevicesCs to SubDeviceC[] :

const subDeviceCs = data?.subDevices?.filter(d => d.type === SubDevice.TYPE_C) as SubDeviceC[];

But is it possible to generate the Query-types instead with Pick<..> | Pick<...> with an exported named type? e.g

// generated types
export const OnSubDeviceC = Pick<
                  SubDeviceC,
                  "y" | "type"
                >

export type GetDeviceList = {
...
        subDevices?: Maybe<
          Array<
            Maybe<
              | OnSubDeviceA
              | OnSubDeviceB
              | OnSubDeviceC
            >
...
};

// in react component
const subDeviceCs = data?.subDevices?.filter(d => d.type === SubDevice.TYPE_C) as OnSubDeviceC[];

[dotansimha]

You should not use type , you should use the built-in field called __typename, it will allow you to discriminate the types.

[danielleroux]

But my problem is the same. I prepared a short demo:
https://www.typescriptlang.org/play?#code/KYDwDg9gTgLgBDAnmYcAiwBuBLAxsAQTgF44BvAKDjgH0akUA7AQwFtgAuOAZxim0YBzANxU4zLr35DR1AEaS+AkRQC+FCqEiwEyVBhz4AQiXJi6DYC3aLpK+beWy4EGAAtgUAjCVyArjDA3AByrgCSjAS4MH7MADYAin6eiI4yYq4eXj78-oEh4ZHRsYnJUIgATGkq6lrQ8JZwAOLAMAZ4wAAy2LymlNQAJlgd3FwEUFDMiAA8AAp4ANbT7fgEADRwAOTMm3AAPlsWetbAmwB8+3DzuEsrwEYbm3K7B5tHTGynZ2ei6hQAZn5GNFsBBGHB-hBXAAKACUXBabWG+G6vX6cCgrT8UHB6MGyKCXAA2njqLR6MdPlxNncCJs1mJqBItvkYPTGXAFCygmyxKoNqT3lYqVs7kZ2WTOdTWXAhoZUM8+QBdPlqDS4MG9THcPxxeCkSEw2GiCja3UwAB0cpGFv+2D1nmhAxIFwGFqFJxIxFINIJ4thtugAFFmLg3E6XXANYxuBA4sALXEIIInRa5LDjUA

export type DeviceA = {
  __typename: string;
  a: string;
  b: string;
}

export type DeviceB = {
  __typename: string;
  b: string;
  otherAttributesNotInActualQuery: string;
  otherAttributesNotInActualQuery2: string;
}
export type GetDeviceList = {
  devices: Array<Pick<DeviceA, 'a' | '__typename'> | Pick<DeviceB, 'b' | '__typename'>>;
}

function foot(): GetDeviceList {
  return {
    devices: [{
      __typename: 'DeviceA',
    a: 'test',
    b: 'test'
  }, {
    __typename: 'DeviceB',
    b: 'test device b'
  }]
  }
}

const result = foot();

result.devices.filter(d => d.__typename === 'DeviceB').forEach(d => console.log(d.b)); // <== Cannot access b

I must cast to DeviceB but than iam lose the information about which attributes i have queried e.g only property 'b' from DeviceB

[dotansimha]

It's a TypeScript issue. You need a type guard here in order to have the filter / forEach working correctly with runtime checks. Hover d inside forEach and you'll see that it's not recognized as DeviceB only.

[dmateiu]

Would it be possible to generate typescript type guards based on the schema?
Or is there already a plugin or plugin config, which would generate type guards?

[dotansimha]

Sure, it should be possible. I think maybe this could be a standalone plugin that can just work with the base types (PRs are welcome!)