[GH-ISSUE #13] support for union types

kerem commented

2026-03-15 11:29:31 +03:00

Owner

Originally created by @albertalquisola on GitHub (May 28, 2019).
Original GitHub issue: https://github.com/atulmy/gql-query-builder/issues/13

is there support for unions and/or interfaces? one of my api calls returns content and content is a union type that can return diff types of models.

Example desired query output:

{
  vehicle {
     ... on Car {
       name
       isSedan
       NumSeats
       topSpeed
     }

     ... on Scooter {
       name
       isElectric
       numMiles
       topSpeed
    }
  }
}

Originally created by @albertalquisola on GitHub (May 28, 2019). Original GitHub issue: https://github.com/atulmy/gql-query-builder/issues/13 is there support for unions and/or interfaces? one of my api calls returns `content` and `content` is a union type that can return diff types of models. Example desired query output: ``` { vehicle { ... on Car { name isSedan NumSeats topSpeed } ... on Scooter { name isElectric numMiles topSpeed } } } ```

kerem

2026-03-15 11:29:31 +03:00

closed this issue
added the
enhancement

help wanted
labels

kerem commented

2026-03-15 11:29:47 +03:00

Author

Owner

@atulmy commented on GitHub (May 28, 2019):

@bebraw / @toadkicker any ideas on Unions / Interfaces?

@atulmy commented on GitHub (May 28, 2019): @bebraw / @toadkicker any ideas on Unions / Interfaces?

kerem commented

2026-03-15 11:29:52 +03:00

Author

Owner

@toadkicker commented on GitHub (May 28, 2019):

#11 will fix this =)

@toadkicker commented on GitHub (May 28, 2019): #11 will fix this =)

kerem commented

2026-03-15 11:29:57 +03:00

Author

Owner

@atulmy commented on GitHub (May 28, 2019):

@toadkicker Can you give an example here for @albertalquisola use case?

@atulmy commented on GitHub (May 28, 2019): @toadkicker Can you give an example here for @albertalquisola use case?

kerem commented

2026-03-15 11:30:03 +03:00

Author

Owner

@toadkicker commented on GitHub (May 28, 2019):

https://github.com/NowServing/gql-query-builder/blob/appsync_support/src/adapters/DefaultQueryAdapter.ts#L112

You can basically attack this however you want by creating your own adapter. I'm guessing this is a conditional thing you want, and so one approach could change the adapter to look for a unions flag in the querybuilder options.

@toadkicker commented on GitHub (May 28, 2019): https://github.com/NowServing/gql-query-builder/blob/appsync_support/src/adapters/DefaultQueryAdapter.ts#L112 You can basically attack this however you want by creating your own adapter. I'm guessing this is a conditional thing you want, and so one approach could change the adapter to look for a unions flag in the querybuilder options.

kerem commented

2026-03-15 11:30:08 +03:00

Author

Owner

@albertalquisola commented on GitHub (Jun 1, 2019):

Thanks for being responsive @atulmy and @toadkicker. For my 2 cents, i'd love for the api to be something like this:

query({
  operation: 'vehicles',
  possibleTypes: [
    { name: 'Car', fields: [{ owner: ['firstName', 'lastName' ]}, 'name', 'isSedan', 'numSeats', 'topSpeed'] },
    { name: 'Scooter', fields: ['name', 'isElectric', 'numMiles', 'topSpeed'] },
  ],
});

// output
`
  {
    vehicles {
      ... on Car {
        owner { 
          firstName
          lastName
        }
        name
        isSedan
        NumSeats
        topSpeed
      }
    
      ... on Scooter {
        name
        isElectric
        numMiles
        topSpeed
      }
    }
  }
`

I'll also look over the adapter pr as well and see how flexible it is

@albertalquisola commented on GitHub (Jun 1, 2019): Thanks for being responsive @atulmy and @toadkicker. For my 2 cents, i'd love for the api to be something like this: ``` query({ operation: 'vehicles', possibleTypes: [ { name: 'Car', fields: [{ owner: ['firstName', 'lastName' ]}, 'name', 'isSedan', 'numSeats', 'topSpeed'] }, { name: 'Scooter', fields: ['name', 'isElectric', 'numMiles', 'topSpeed'] }, ], }); // output ` { vehicles { ... on Car { owner { firstName lastName } name isSedan NumSeats topSpeed } ... on Scooter { name isElectric numMiles topSpeed } } } ` ``` I'll also look over the adapter pr as well and see how flexible it is

kerem commented

2026-03-15 11:30:13 +03:00

Author

Owner

@toadkicker commented on GitHub (Jun 2, 2019):

The idea is that the adapter maintains the same documented API that the query builder adheres to. A custom adapter is just a Javascript class that implements the query/mutation adapter interface. Another way to say it is the adapter is the engine of the output, and for the engine to work it needs to have the right inputs.

In @albertalquisola particular use case consider ...car in your fields., and then creating a custom adapter (it can extend from the default one) that outputs unions based on ... provided in there. Or even simpler don't worry about detecting it, just hard code it to use the custom adapter when called.

@toadkicker commented on GitHub (Jun 2, 2019): The idea is that the adapter maintains the same documented API that the query builder adheres to. A custom adapter is just a Javascript class that implements the query/mutation adapter interface. Another way to say it is the adapter is the engine of the output, and for the engine to work it needs to have the right inputs. In @albertalquisola particular use case consider `...car` in your fields., and then creating a custom adapter (it can extend from the default one) that outputs unions based on `...` provided in there. Or even simpler don't worry about detecting it, just hard code it to use the custom adapter when called.

kerem commented

2026-03-15 11:30:18 +03:00

Author

Owner

@albertalquisola commented on GitHub (Jun 3, 2019):

@toadkicker, I get the concept behind the interface adapter, but could you post a pseudocode example?

@albertalquisola commented on GitHub (Jun 3, 2019): @toadkicker, I get the concept behind the interface adapter, but could you post a pseudocode example?

kerem commented

2026-03-15 11:30:23 +03:00

Author

Owner

@toadkicker commented on GitHub (Jun 5, 2019):

Can just make UnionAdapter, and change from the default:

private operationTemplate() {
    return `... on ${this.operation.charAt(0).toUpperCase() + this.operation.substring(1)} { ${Utils.queryFieldsMap(
      this.fields
    )} }`;
}

@toadkicker commented on GitHub (Jun 5, 2019): Can just make `UnionAdapter`, and change from the default: ``` private operationTemplate() { return `... on ${this.operation.charAt(0).toUpperCase() + this.operation.substring(1)} { ${Utils.queryFieldsMap( this.fields )} }`; } ```

kerem commented

2026-03-15 11:30:28 +03:00

Author

Owner

@atulmy commented on GitHub (Jun 10, 2019):

@albertalquisola let us know if the adapter example was of help

@atulmy commented on GitHub (Jun 10, 2019): @albertalquisola let us know if the adapter example was of help

kerem commented

2026-03-15 11:30:33 +03:00

Author

Owner

@Wurielle commented on GitHub (Mar 29, 2021):

Not too pretty but it does the trick:

Create a custom adapter for the type of operation you want (based on DefaultQueryAdapter in my case)
Replace the imports accordingly:

// UnionQueryAdapter.ts
import Fields from 'gql-query-builder/build/Fields';
import IQueryBuilderOptions from 'gql-query-builder/build/IQueryBuilderOptions';
import OperationType from 'gql-query-builder/build/OperationType';
import Utils from 'gql-query-builder/build/Utils';
import IQueryAdapter from 'gql-query-builder/build/adapters/IQueryAdapter';
import VariableOptions from 'gql-query-builder/build/VariableOptions';

Replace the operationTemplate method with the following:

// UnionQueryAdapter.ts
private operationTemplate(variables: VariableOptions | undefined) {
  return `${this.operation} ${
    variables ? Utils.queryDataNameAndArgumentMap(variables) : ''
  } ${
    this.fields && this.fields.length > 0
      ? `{ ${this.fields
          .map((query: any) => `... on ${Object.keys(query)[0]} { ${
            Utils.queryFieldsMap(query[Object.keys(query)[0]])
          } }`)
          .join(' ')} }`
      : ''
  }`;
}

Call your union like this:

query({
    operation: 'foobar',
    fields: [{ Foo: ['foofoo'] }, { Bar: ['barbar'] }],
  },
  UnionQueryAdapter,
)

// Output
query  { 
  views  { 
    ... on Foo { 
      foofoo 
    } 
    ... on Bar { 
      barbar 
    } 
  } 
}

Hope this helps some people that were struggling with unions like myself.
Note: this solution isn't 100% complete but it should help kickstart your union needs 😄
Edit: here's the full adapter file: UnionQueryAdapter.ts

@Wurielle commented on GitHub (Mar 29, 2021): Not too pretty but it does the trick: - Create a custom adapter for the type of operation you want (based on [DefaultQueryAdapter](https://github.com/atulmy/gql-query-builder/blob/master/src/adapters/DefaultQueryAdapter.ts) in my case) - Replace the imports accordingly: ```javascript // UnionQueryAdapter.ts import Fields from 'gql-query-builder/build/Fields'; import IQueryBuilderOptions from 'gql-query-builder/build/IQueryBuilderOptions'; import OperationType from 'gql-query-builder/build/OperationType'; import Utils from 'gql-query-builder/build/Utils'; import IQueryAdapter from 'gql-query-builder/build/adapters/IQueryAdapter'; import VariableOptions from 'gql-query-builder/build/VariableOptions'; ``` - Replace the `operationTemplate` method with the following: ```javascript // UnionQueryAdapter.ts private operationTemplate(variables: VariableOptions | undefined) { return `${this.operation} ${ variables ? Utils.queryDataNameAndArgumentMap(variables) : '' } ${ this.fields && this.fields.length > 0 ? `{ ${this.fields .map((query: any) => `... on ${Object.keys(query)[0]} { ${ Utils.queryFieldsMap(query[Object.keys(query)[0]]) } }`) .join(' ')} }` : '' }`; } ``` - Call your union like this: ```javascript query({ operation: 'foobar', fields: [{ Foo: ['foofoo'] }, { Bar: ['barbar'] }], }, UnionQueryAdapter, ) // Output query { views { ... on Foo { foofoo } ... on Bar { barbar } } } ``` Hope this helps some people that were struggling with unions like myself. **Note**: this solution isn't 100% complete but it should help kickstart your union needs 😄 **Edit**: here's the full adapter file: [UnionQueryAdapter.ts](https://gist.github.com/Wurielle/53a76c256f7d1a5204130bd69e0a8601)

Rows
Columns

[GH-ISSUE #13] support for union types #102