Handling multiple server with the new client-preset recommendations

[pedropmedina]

Hi,

Can anyone show me what's the right way of handling a configuration with several client connections.

Let's take a project where I have a connection for store api and another one for an auth api as example. Before I would model the queries in specific directories and point the documents to those directories.

That worked fine, but with the new recommendations, the goal is to keep your query in the same place as the component so it becomes harder to isolate API specific queries and generating code often breaks.

This used to be my previous config:

import { CodegenConfig } from '@graphql-codegen/cli';

const setPlugins = (plugins: string[] = []) => [
  'typescript',
  'typescript-operations',
  'typescript-react-query',
  ...plugins,
];

const setDocuments = (app: string, documents: string[] = []) => [
  './src/codegen/shared/fragments/**/*.{ts,tsx}',
  `./src/codegen/${app}/**/*.{ts,tsx}`,
  `!/src/codegen/${app}/code/*.graphql.{ts,tsx}`,
  ...documents,
];

const config: CodegenConfig = {
  generates: {
    './src/codegen/auth/code/graphql.ts': {
      schema: process.env.NEXT_PUBLIC_AUTH_GRAPHQL_API_URL,
      documents: setDocuments('auth'),
      plugins: setPlugins(),
    },
    './src/codegen/store/code/graphql.ts': {
      schema: process.env.NEXT_PUBLIC_STORE_GRAPHQL_API_URL,
      documents: setDocuments('store'),
      plugins: setPlugins(),
    },
  },
  overwrite: true,
  config: { fetcher: 'graphql-request' },
};

export default config;

How can I achieve something similar to the above with the client-preset and recommendations of keeping query at the component level?

[saihaj]

in general it is an anti-pattern for client apps to resolving data from multiple GraphQL services. Better is that the server stitches the sources and serves one unified schema. If that is not possible other options (which is just a work around imo) but doing client side composition of schema. Then FE developers just need to interact with one schema and everything else is abstracted away.

[richardscarrott]

It seems a bit excessive to stitch two APIs together. I can see the need if you’re using something like Apollo client which has a normalised cache, but if you’re just using graphql-request server side it seems silly not to be able to request multiple graphql APIs 🤔

[dpnova]

Does the projects in config help? https://the-guild.dev/graphql/codegen/docs/config-reference/multiproject-config