Import queries instead of duplicating them on the generated output

[danielo515]

Is your feature request related to a problem? Please describe.

It is a problem we have with the way the output is generated, which leads to a very big file and failing static dependency analysis.

When using "typescript-operations" and "typescript-react-apollo" the generated output (which should include hooks and HOCs) the queries that are being used are duplicated on the generated file. This mean that the original file where the query is defined is detected as unused by our dependency analysis tools, because they are in fact unused. This is a problem because we used to have some big amounts of unused code and we don't want to get back to that situation. Also the generated output is huge, it is already 15k lines, which can be drastically reduced if the hooks were importing the queries rather than inlining them.

Describe the solution you'd like
I want an option where the queries are imported from their original file rather than being copy pasted to the generated output code.

Describe alternatives you've considered
I don't have any alternative

[n1ru4l]

Why not simply write your operations into .graphql files? Then you could treat those as operation definition files and your dead code elimination file could skip those but instead complain on the generated output, which will force you to remove definitions in the .graphql file (or delete the file completely).

Importing from the original file could potentially lead to cyclic dependencies.

If what I said before totally does not make sense it would be best if you could provide an example code sandbox that showcases how you use graphql-codegen so I can get a better understanding.

Furthermore, you should take a look at the TypedDocumentNode plugin, which can drastically reduce the generated output: https://www.graphql-code-generator.com/docs/plugins/typed-document-node

[danielo515]

That is what we are doing, and that is the problem. We write the operations on graphql files, then those operations are copied into a huge (HUGE!) file containing everything and the grapqhl files are left orphan. We can stop using a query or a mutation and we will have no way to knowing it because all graphql files are unused. There is no way for our static analysis tools to determine which graphql queries/files are not used anymore. If we put all operations into graphql files, what is the risk of cyclic dependencies? And even if that is the case, I prefer to deal with them rather than having this huge, impossible to load file and not being able to run any analysis on dependencies.

…

On Fri, Sep 3, 2021 at 1:27 PM Laurin Quast ***@***.***> wrote: Why not simply write your operations into .graphql files? Importing from the original file could potentially lead to cyclic dependencies. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#6605 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AARKJWOMYVS667BNWPXEUXLUACWKLANCNFSM5DJPBKRQ> .

-- --- https://danielorodriguez.com

[n1ru4l]

Have you considered writing your GraphQL Operations within the Code, that way when you remove the usage of a operation the generated code will be removed as well? This is what the relay flow pursues and is now also possible with graphql-codegen via https://the-guild.dev/graphql/codegen/plugins/presets/preset-client

[danielo515]

Then the grapqhl operations will be unused variables on that file, because I will have to import them from the generated file.

…

On Mon, Sep 27, 2021 at 3:16 PM Laurin Quast ***@***.***> wrote: Have you concidered writing your GraphQL Operations within the Code, that way when you remove the usage of a operation the generated code will be removed as well. This is what the relay flow persues and is now also possible with graphql-codegen via https://www.graphql-code-generator.com/docs/presets/gql-tag-operations — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#6605 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AARKJWLROA3MD5WG4ZE7GJLUEBVBTANCNFSM5DJPBKRQ> .

-- --- https://danielorodriguez.com

[n1ru4l]

@danielo515 Where in this example is an unused import?

import { gql } from ‘@app/gql’;
import { useQuery } from ‘urql’;
// TweetsQuery is a fully typed document node/
const TweetsQuery = gql(/* GraphQL */ `
  query TweetsQuery {
    Tweets {
      id
      body
    }
  }
`);
const Tweets = () => {
  const [result] = useQuery({ query: TweetsQuery });
  const { data, fetching, error } = result;
  if (fetching) return <p>Loading...</p>;
  if (error) return <p>Oh no... {error.message}</p>;
  return (
    <ul>
      {/* data is fully typed :tada: */}
      {data.Tweets.map(tweet => (
        <li key={tweet.id}>{tweet.body}</li>
      ))}
    </ul>
  );
};

We are also working on a module augmentation mode that we will release soon. That way only type definitions are generated that overload the gql tag function.

You can have a look at the docs here: https://github.com/dotansimha/graphql-code-generator/pull/6492/files#diff-1a39726074b13ad1586a426c290e1c2213e3d691224eff1de2e3ddc92748ebc0 and already test the preset with those features by using the following packages: #6492 (comment)

By following this pattern all your GraphQL Operations are co-located with the actual code/components. Deleting a component file that includes a GraphQL Operation will automatically result in the generated code for it being deleted (when running codegen).

[danielo515]

Ok, I see where your confusion comes from. We are also using typescript operations, so we get hooks automatically generated for us, then we just import them. So in your example, we will not be using `useQuery({ query: TweetsQuery })`. Instead we will be importing useTweets and use that straight. I'll look at your links to see if any of those fixes our problems.

…

On Wed, Oct 6, 2021 at 10:01 AM Laurin Quast ***@***.***> wrote: @danielo515 <https://github.com/danielo515> Where in this example is an unused import? import { gql } from ***@***.***/gql’; import { useQuery } from ‘urql’; // TweetsQuery is a fully typed document node/ const TweetsQuery = gql(/* GraphQL */ ` query TweetsQuery { Tweets { id body } } `); const Tweets = () => { const [result] = useQuery({ query: TweetsQuery }); const { data, fetching, error } = result; if (fetching) return <p>Loading...</p>; if (error) return <p>Oh no... {error.message}</p>; return ( <ul> {/* data is fully typed 🎉 */} {data.Tweets.map(tweet => ( <li key={tweet.id}>{tweet.body}</li> ))} </ul> ); }; We are also working on a module augmentation mode that we will release soon. That way only type definitions are generated that overload the gql tag function. You can have a look at the docs here: https://github.com/dotansimha/graphql-code-generator/pull/6492/files#diff-1a39726074b13ad1586a426c290e1c2213e3d691224eff1de2e3ddc92748ebc0 and already test the preset with those features by using the following packages: #6492 (comment) <#6492 (comment)> By following this pattern all your GraphQL Operations are co-located with the actual code/components. Deleting a component file that includes a GraphQL Operation will automatically result in the generated code for it being deleted (when running codegen). — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6605 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AARKJWKXTCNKPX45PYH2EETUFP67JANCNFSM5DJPBKRQ> .

-- --- https://danielorodriguez.com

[macrozone]

Have you considered writing your GraphQL Operations within the Code, that way when you remove the usage of a operation the generated code will be removed as well? This is what the relay flow pursues and is now also possible with graphql-codegen via https://www.graphql-code-generator.com/docs/presets/gql-tag-operations

this link no longer works, has this been removed?

[n1ru4l]

@macrozone https://the-guild.dev/graphql/codegen/plugins/presets/preset-client

[macrozone]

@macrozone https://the-guild.dev/graphql/codegen/plugins/presets/preset-client

thx, i also see this is recommended in the guide. I noticed that many devs get confused on which style to use, so I raised an issue #9251

[eltonio450]

reopening the discussion here:

we have the same issue:

• queries/mutations live in ts/tsx files in the codebase. Sometimes indeed close usage, sometimes not
  Ex:

// ClientInsuranceContainer.tsx
const updateClientInsuranceSpecificitiesMutation = gql`
  mutation updateClientInsuranceSpecificities(
    $input: UpdateClientInsuranceSpecificitiesInput!
  ) {
    updateClientInsuranceSpecificities(input: $input) {
      id
      insuranceSpecificities {
        cargoValuePercentInsured
        coverage
      }
    }
  }
`;

• we do generated a huge file api.generated.ts with hooks (queries, suspense queries, etc.)

We use

• typescript plugin
• typescript-operations

We want to have static analysis on what is used or not (we use knip)
If we rely on the unused files, then we will have many false positives (ex: my mutation from dashboard.mutation.tsx that has been copied to api.generated.ts)
If we rely on unused exports (ex: in api.generated.ts), we will have many false positives (unused hooks: normal query if we use the suspense query, etc.)

near-operation-file only works with .graphql file

not sure what's best from here

thank you!