Extendable Queries

[Borvik]

So... I've got a relatively unique scenario and I'm not sure if the code-generator supports it or if it does how it supports it.

Note... I'm open to changing how our process currently works if I can find a solution that will allow code-generator to work.

Also note... I know this isn't the most "react" way of doing things... but it works, and being a monolithic application it might take a while to implement and test any suggestions.

The Current Setup

We have a fairly large react application that uses SSR with loadable-components and react-apollo (unfortunately not up-to-date).

We have clients that like to request changes that are specific to them and no one else that sometime necessitates query and/or component structural changes - so we developed something of a "override" system.

Our main application is actually built as a library with a single entry point that starts the express server and renders the code.

Our client application imports the main application and just calls start. The main application provides hooks (not react hooks, more override points) to allow customizing the code.

Basic example

main

import React from 'react';

// this would be in the main application and is merged with a class definition from a specific file in the client application
export class MyComponent extends React.Component {

  buttonTextQuery() {
    return gql`query {
      button {
        text
        ${this.extraQueryFields()}
      }
    }`;
  }
  extraQueryFields() { return ''; }

  renderButton(data: any) {
    return <button>{data?.button?.text}</button>
  }

  render() {
    return (
      <>
        <h2>My Component</h2>
        <Query query={this.buttonTextQuery()}>
          {({data, error, loading}) => {
            if (loading) {
              return 'Loading...';
            }
            if (error) {
              return <pre>{JSON.stringify(error)}</pre>
            }
            return this.renderButton(data);
          }}
        </Query>
        <p>More detailed explanation</p>
      </>
    );
  }
}

Client

import React from 'react';

// this is actually merged at the prototype level with the definition from the main library
export default class MyComponentOverride {
  extraQueryFields() {
    return `
      title
    `;
  }

  renderButton(data: any) {
    return <button title={data?.button?.title}>{data?.button?.text}</button>
  }
}

When finally run, this would run the graphql query:

query {
  button {
    text
    title
  }
}

And output:

<h2>My Component</h2>
<button title="Test Button Title">Test Button Text</button>
<p>More detailed explanation</p>

The Question

With the setup now out of the way, the question is can graphql code-generator even handle a scenario like this - and if so, how would I restructure this to allow for the extensibility we need? I think I figured out the server side of this so, the client side is the last bit I need to investigate.

I'd like to get rid of those any types in both our main application and client applications without having to manually update the types all the time.

[charlypoly]

Hi @Borvik,

A simple setup relying on both typescript and typescript-operations codegen packages should do the work to replace the any data types.
Codegen will be able to extract the gql declaration from your .tsx files with the following example configuration (with proper schema path or URLs and documents path):

codegen.ts (with last @graphql-codegen/cli version):

import { CodegenConfig } from '@graphql-codegen/cli';
 
const config: CodegenConfig = {
  schema: 'http://localhost:3000/graphql',
  documents: 'path-to-client/**/*.tsx',
  generates: {
    './src/types.ts': {
      plugins: ['typescript', 'typescript-operations']
    }
  }
};
export default config;

Does this would fit your use-case?

[ardatan]

Codegen uses GraphQL Tools' GraphQL Tag Pluck, and GraphQL Tag Pluck extracts operations by visiting the AST of the code files instead of executing them them because importing will bring runtime implications.
So currently dynamic string interpolations are not supported, and it is not possible to support your code structure that is embedding queries inside frontend code (including all react imports and so on).
If you export your operations in seperate files, Codegen can import and execute the code instead of visiting AST;

export default gql`
# All the stuff
`

And in the codegen config, you should do;

config: {
  noPluck: true
}

[Borvik]

Which I actually figured. I don't mind restructuring to something Codegen can do - except the problem again is the separate projects.

How could I structure it such that the main query would be in ProjectA, and an optional extra fragment that ProjectA somehow accesses is within ProjectB where ProjectB imports ProjectA.

[Borvik]

Like - is there a way to tap into the part where codegen is getting the file?

In theory then I could write an "override" function for codegen that would say I'm looking at this file in ProjectA - does an fragment file exist in ProjectB? If so, use that.

[Borvik]

Perhaps...

If I restructured to use .gql files for the client without es6 strings...

Does graphql code gen support importing fragments using graphql-tag/loader?

If so could I maybe tap into the require config to maybe override which file - or combine the files and use that instead?

[Borvik]

or perhaps instead of the require a custom schema loader or a custom document loader