Specify response type for inline fragment graphql in js file

Question

Here, inline fragment graphql is used. I'm not able to write the return type in the js file.

Graphql:

query MyQuery {
  samples(dataset: "", view: "") {
    edges {
      node {
        ... on ImageSample {
          id
        }
        ... on PointCloudSample {
          id
        }
      }
    }
  }
}

JS file: this raises a syntax error:

const SAMPLE_DATA = {
  edges: {
    node: {
      ... on ImageSample {
        id
        sample
      }
      ... on PointCloudSample {
        id
      }
    }
  }
};

I've also tried with node: {id} but didn't help

Cannot query field 'id' on type 'SampleItem'. Did you mean to use an inline fragment on 'Sample', 'ImageSample', 'PointCloudSample', or 'VideoSample'?

Calling the GraphQL query like this:

  const gqlQuery = jsonToGraphQLQuery({
    query: {
      samples: {
        __args: {
          ...data,
        },
        ...SAMPLE_DATA
      }
    }
  }, { pretty: true });

Can anyone help me how we need to write the SAMPLE_DATA response type?

Answer 1

I authored the GraphQL API. The below is a perfectly valid query as of v0.18.0.

query {
  samples(dataset: "datasetName", view: []) {
    edges {
      node {
        ... on ImageSample {
          id
        }
        ... on PointCloudSample {
          id
        }
      }
    }
  }
}

I believe you just need to follow the json-to-graphql-query instructions for querying with multiple inline fragments.

const SAMPLE_DATA = {
  edges: {
    node: {
      __on: [
        { __typeName: "ImageSample", id: true },
        { __typeName: "PointCloudSample", id: true }
      ]
    }
  }
};