Merging schemas from multiple APIs with similar types

[pedropmedina]

Hi,
Can someone explains how codegen handles merging schemas? In an instance where I have two GraphQL APIs in the top schema config that each contains same named types with different fields, how would codegen handle it and what's the best option in this case to preserve the types?

// codegen.ts

{
  schema: [apiUrl1, apiUrl2],
  generates: {
    './src/gql/': {
      preset: 'client',
      plugins: [],
      presetConfig: { fragmentMasking: { unmaskFunctionName: 'getFragmentData' } },
      documents: ['!/src/codegen/**/*', './src/pages/**/*.tsx', './src/features/**/*.{ts,tsx}'],
    },
  },
  ignoreNoDocuments: true,
  overwrite: true,
}

// apiUrl1

type Employee {
 name: String
 companyName: String
 department: Department
}

type Department  {
 name: String
}

// apiUrl2

type Employee {
 name: String
 companyName: String
 department: Department
compensation: Float
}

type Department  {
 name: String
 manager: Manger
}

type Manager {
 name: String
 title: String
}

How would codegen handle the above?

Thanks

[saihaj]

codegen does not do any merging of schemas. In this case your best option is to have multiple generate targets for types.

{
  generates: {
    './src/gql/api1/': {
      schema: apiUrl1,
      preset: 'client',
      plugins: [],
      presetConfig: { fragmentMasking: { unmaskFunctionName: 'getFragmentData' } },
      documents: ['!/src/codegen/**/*',], // --- 1
    },
    './src/gql/api2/': {
      schema: apiUrl2,
      preset: 'client',
      plugins: [],
      presetConfig: { fragmentMasking: { unmaskFunctionName: 'getFragmentData' } },
      documents: ['!/src/codegen/**/*',], // --- 1
    },
  },
  ignoreNoDocuments: true,
  overwrite: true,
}

so the tricky part is how you structure you code. This is usually not a common pattern I see where the app is making calls to different GraphQL service.

Based on what I see in your schema it looks like there are 2 different subgraphs of one service. So my recommendation is having a gateway that merges the sources so your API has only one service to make calls to. Or the other option is you do client side compositions and you use the composed schema to generate types for your app.

[pedropmedina]

Hi @saihaj ,
Thanks for the quick response.

I thought I had read somewhere that when using multiple schemas they will be merged.

"Or the other option is you do client side compositions and you use the composed schema to generate types for your app." <- By this you mean, use multiple generated targets as shown in your example above?

[saihaj]

By this you mean, use multiple generated targets as shown in your example above?

no the above example is just simply generating specific types at a specific path.

What I mean by client side composition is trying to use GraphQL Mesh. Mesh is platform agnostic you can run it on servers or you can use the generated SDK on client side. cc @ardatan

[pedropmedina]

Thanks again @saihaj ,
I wasn't aware of Mesh. Looks pretty good, however, how would Mesh deal with a situation like the one above with same named types?

[pedropmedina]

Hey @saihaj

I got mesh working and it's very useful. I like the generated SDK, however, I have another question.
What's the advantage of using the provided SDK vs using the codegen client preset recommended under codegen's documentation?

[saihaj]

@pedropmedina it depends on your use-case. For building a react app I would prefer using client preset where I can collocate my data dependencies next to my components with fragments - https://the-guild.dev/blog/unleash-the-power-of-fragments-with-graphql-codegen