-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
GraphQL Code Generator v5 Roadmap #8296
Comments
Will there be support for module augmentation still? 🤔 I really enjoy this feature, but there are some shortcomings like some frameworks don't provide for example |
Hi @huv1k! However, this being an RFC, we will take your feedback into account! 👀 |
Based on your code example, does that mean that the preferred way to consume GraphQL operations is co-location within TS/JS files? I just migrated a large codebase from Apollo CLI to graphql-codegen v2 and refactored it to move all GraphQL operation definitions to .graphql files (importing only typed documents to pass to Apollo Client), I wouldn't want to have to undo that all over again.. |
Hi @franky47, We are exploring different migration path options; providing a |
Hi @charlypoly, here's my overwrite: true
schema: "../backend/schema.graphql"
documents: "src/**/*.graphql"
config: # The following configuration will adjust output to the defaults of Apollo-Codegen, and should be compatible with most use-cases.
preResolveTypes: true # Simplifies the generated types
namingConvention: keep # Keeps naming as-is
avoidOptionals: # Avoids optionals on the level of the field
field: true
nonOptionalTypename: true # Forces `__typename` on all selection sets
skipTypeNameForRoot: true # Don't generate __typename for root types
generates:
src/modules/graphql.types.ts:
plugins:
- typescript
- typescript-operations
- typed-document-node
hooks:
afterOneFileWrite:
- prettier --write I have GraphQL code into I migrated from a setup where the Apollo CLI generated the TS types from I really like the typed document plugin, it removed the need to explicitly pass generic arguments to Hope this helps you see a bit better about my particular use-case. |
@franky47, thank you for sharing it! We are also exploring options to still support |
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as off-topic.
This comment was marked as off-topic.
If it is going full TypeDocumentNode way (which I like), is it not better to go with a builder pattern approach. The builder can be full type safe and be generated from the introspection query. Additionally you need to generate the builder only initially and on schema change and not when adding new documents. Some open source projects which apply this principle:
In my opinion this provides best of the worlds. Small bundle size, no watchers necessary on frontend and much faster dev cycle. |
Augmented module is a nice feature for people who don't like having their own source code polluted by/relying on generated code, why not keeping it for those willing to make advanced configuration? (babel plugin is just a one line configuration). Inspired by what graphql-let does, I personally came up with some kind of hack that generates everything to a fake schema: path/to/schema.json
documents:
- src/**/*.ts
- src/**/*.tsx
generates:
# app operations are generated inside a fake @types module
../../node_modules/@types/myProject__graphql-client:
preset: gql-tag-operations-preset
presetConfig:
augmentedModuleName: '@myProject/graphql-client'
fragmentMasking:
augmentedModuleName: '@myProject/graphql-client'
hooks:
# here is the ugliest part of the "hack": generating a package.json
afterAllFileWrite:
- "printf '{ \"name\": \"@types/myProject__graphql-client\", \"types\": \"gql.d.ts\" }' > '../../node_modules/@types/myProject__graphql-client/package.json'" This allows for everything within an app to be transparently imported from a Big advantage: I can remove codegen at any time without breaking the code, only losing types! import { gql, useQuery } from '@myProject/graphql-client'
const MyQuery = gql(`
query MyQuery {
...
}
`)
const MyComponent = () => {
const { loading, data, error } = useQuery(MyQuery)
return <>...</>
} It would be nice to keep this ability to hide the generated code somewhere. |
This comment was marked as resolved.
This comment was marked as resolved.
…on-4) (#6956) [![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@graphql-codegen/cli](https://togithub.com/dotansimha/graphql-code-generator) | [`2.12.2` -> `2.13.0`](https://renovatebot.com/diffs/npm/@graphql-codegen%2fcli/2.12.2/2.13.0) | [![age](https://badges.renovateapi.com/packages/npm/@graphql-codegen%2fcli/2.13.0/age-slim)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://badges.renovateapi.com/packages/npm/@graphql-codegen%2fcli/2.13.0/adoption-slim)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://badges.renovateapi.com/packages/npm/@graphql-codegen%2fcli/2.13.0/compatibility-slim/2.12.2)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://badges.renovateapi.com/packages/npm/@graphql-codegen%2fcli/2.13.0/confidence-slim/2.12.2)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>dotansimha/graphql-code-generator</summary> ### [`v2.13.0`](https://togithub.com/dotansimha/graphql-code-generator/blob/HEAD/packages/graphql-codegen-cli/CHANGELOG.md#​2130) [Compare Source](https://togithub.com/dotansimha/graphql-code-generator/compare/8a4ef646f67e4b59ba7ebee2be0b83348e15575f...58c02b7bef0b94403deb8cd810175f4e7fc6abe8) ##### Minor Changes - [#​8302](https://togithub.com/dotansimha/graphql-code-generator/pull/8302) [`876844e76`](https://togithub.com/dotansimha/graphql-code-generator/commit/876844e7644a917172f09b3c4eb54a2f4c90e4c6) Thanks [@​charlypoly](https://togithub.com/charlypoly)! - **`@graphql-codegen/gql-tag-operations` and `@graphql-codegen/gql-tag-operations-preset`** Introduce a `gqlTagName` configuration option *** **`@graphql-codegen/client-preset`** New preset for GraphQL Code Generator v3, more information on the RFC: [https://github.com/dotansimha/graphql-code-generator/issues/8296](https://togithub.com/dotansimha/graphql-code-generator/issues/8296) *** **`@graphql-codegen/cli`** Update init wizard with 3.0 recommendations (`codegen.ts`, `client` preset) ##### Patch Changes - [#​8302](https://togithub.com/dotansimha/graphql-code-generator/pull/8302) [`876844e76`](https://togithub.com/dotansimha/graphql-code-generator/commit/876844e7644a917172f09b3c4eb54a2f4c90e4c6) Thanks [@​charlypoly](https://togithub.com/charlypoly)! - dependencies updates: - Updated dependency [`@graphql-codegen/plugin-helpers@^2.6.2` ↗︎](https://www.npmjs.com/package/@​graphql-codegen/plugin-helpers/v/2.6.2) (from `^2.7.1`, in `dependencies`) - Updated dependency [`@whatwg-node/fetch@^0.3.0` ↗︎](https://www.npmjs.com/package/@​whatwg-node/fetch/v/0.3.0) (from `^0.4.0`, in `dependencies`) - Updated dependency [`[email protected]` ↗︎](https://www.npmjs.com/package/cosmiconfig-typescript-loader/v/4.0.0) (from `^4.0.0`, in `dependencies`) - Added dependency [`@babel/generator@^7.18.13` ↗︎](https://www.npmjs.com/package/@​babel/generator/v/7.18.13) (to `dependencies`) - Added dependency [`@babel/template@^7.18.10` ↗︎](https://www.npmjs.com/package/@​babel/template/v/7.18.10) (to `dependencies`) - Added dependency [`@babel/types@^7.18.13` ↗︎](https://www.npmjs.com/package/@​babel/types/v/7.18.13) (to `dependencies`) - Added dependency [`@graphql-codegen/[email protected]` ↗︎](https://www.npmjs.com/package/@​graphql-codegen/client-preset/v/1.0.1) (to `dependencies`) - Updated dependencies \[[`876844e76`](https://togithub.com/dotansimha/graphql-code-generator/commit/876844e7644a917172f09b3c4eb54a2f4c90e4c6)]: - [@​graphql-codegen/client-preset](https://togithub.com/graphql-codegen/client-preset)[@​1](https://togithub.com/1).0.1 </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Enabled. ♻ **Rebasing**: Whenever PR is behind base branch, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, click this checkbox. --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/apollographql/apollo-server). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzMi4yMDYuMCIsInVwZGF0ZWRJblZlciI6IjMyLjIwNi4wIn0=--> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
Hi @sonatard, |
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
With I also hope |
thanks for building this! i'm glad i can use some of the same patterns available in relay with graphql-codegen now @charlypoly do you have any thoughts on supporting generating multiple files vs single in a project with a large amount of definitions i would like to be able to not load all of the runtime document nodes upfront unless they're actually being used, and let code-splitting and the bundler just include the ones that are needed. I noticed that the implementation of the generated alternatively, is there a recommended way to customize the output of the |
Hi @jstejada, The |
@charlypoly oh that’s perfect, thank you! |
@charlypoly thanks! i just tried this, but i'm still seeing all of the document nodes being included at runtime on a production build. is there any other configuration required other than the one in the |
@jstejada, those document nodes are required for your GraphQL client to work. |
@charlypoly ah, i see, got it; yeah I understand they are required, my original question was about whether we could avoid loading all runtime document nodes up-front (i.e. since they all get generated into the single generated file), which can be quite a bit in a project with a large number of documents, vs being able to import them only when they are actually being used. e.g. when visiting a route i would like to only include at runtime the documents used in the query for that route, vs including all the documents defined in the project this would probably require generating separate files for each document definition, and then having babel transpile into a require/import call to import only that specific file. in any case, i understand this might not be possible right now, but i'd be curious if there are any extension points in the plugin that might allow me to implement this custom behavior. thanks again for the responses! |
If I have a GraphQL client that only takes in strings, is there a way to get the |
hmm so the graphql-code-generator/packages/plugins/typescript/typed-document-node/src/index.ts Lines 48 to 50 in eeecb48
|
Hi everyone, I am excited about the development experience that the client-preset and fragment-masking features will provide! the client-preset is possible to generate TypedDocumentNode from a Therefore, it attempts to split the file using the near-operation-file preset. // codegen.ts
import { CodegenConfig } from "@graphql-codegen/cli";
const config: CodegenConfig = {
schema: "https://swapi-graphql.netlify.app/.netlify/functions/index",
documents: ["src/**/*.graphql"],
generates: {
"./src/gql/": {
preset: "client",
plugins: [],
},
"./src/": {
preset: "near-operation-file",
presetConfig: {
extension: ".generated.ts",
baseTypesPath: "~~/gql/graphql",
},
plugins: ["typed-document-node"],
config: {
typesPrefix: "Types.",
},
},
},
};
export default config; # FilmItem.graphql
fragment FilmItem on Film {
id
title
releaseDate
producers
} // FilmItem.generated.ts
import * as Types from '~/gql/graphql';
import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
export const FilmItemFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FilmItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Film"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"releaseDate"}},{"kind":"Field","name":{"kind":"Name","value":"producers"}}]}}]} as unknown as DocumentNode<Types.FilmItemFragment, unknown>; // Film.tsx
import { FilmItemFragmentDoc } from "./FilmItem.generated";
import { FragmentType, useFragment } from "./gql/fragment-masking";
const Film = (props: { film: FragmentType<typeof FilmItemFragmentDoc> }) => {
const film = useFragment(FilmItemFragmentDoc, props.film);
return (
<div>
<h3>{film.title}</h3>
<p>{film.releaseDate}</p>
</div>
);
};
export default Film; The code for the PoC in progress can be found here: MH4GF/graphql-codegen-client-preset-example@e45ef9a Is this usage not recommended? Please let me know your thoughts. |
Not having |
@codepunkt As a workaround, you can add |
@n1ru4l Thanks. Turns out it is available but not documented 😀 |
how to nuxt 3 used ? |
I cannot import the fragment (e.g. UserItemFragment) from |
At The Guild, we’ve decided to work as much as possible in public; that’s why we are opening the roadmaps for all of our projects.
The goals for this are:
Before laying down the roadmap of GraphQL Code Generator v3, we would like to thank all of you for being so many who use codegen daily and for contributing to making it such a complete project! 🚀
While some people judge that GraphQL is difficult, GraphQL Code Generator v3 aims to change that perspective by providing a unified configuration along with a smaller and simpler generated code.
By providing a unified package and configuration for all client-side use cases, all existing and future plugin alternatives will be moved to community repos.
Let’s now cover these changes in detail.
A unified configuration and package for all GraphQL clients
Most of the existing client-side plugins (
typescript-react-apollo
,typescript-react-query
, etc) rely on the generation of hooks or SDKs that wrap the underlying GraphQL Client in a type-safe way.However, the generation of hooks or SDK code brings many downsides:
near-operation-file
compatibility)To make GraphQL code generation great and simple, the v3 version will introduce two major changes:
Here is how you can already configure codegen for all GraphQL Clients:
The
client
preset comes with a simple opinionated configuration and a lightweight types-only generation.To try the new
client
preset, please install the following dependencies:First, start GraphQL Code Generator in watch mode:
Using GraphQL Code Generator will type your GraphQL Query and Mutations as you write them ⚡️
Now, each query or mutation written with the generated
graphql()
function will be automatically typed!For example, with Apollo Client (React):
Thanks to work made to integrate
TypeDocumentNode
(the underlying plugin used bypreset: client
) with most of the popular GraphQL clients, you no longer need hooks or SDK, simple GraphQL documents works!We believe that the
preset: client
approach is the way to get the best of TypeScript and GraphQL by:graphql()
function needs to be imported (no type, hooks, document imports)Finally, this new
preset: client
has been properly tested on all popular GraphQL clients across most frameworks:@apollo/client
(since3.2.0
, not when using React Components (<Query>
))@urql/core
(since1.15.0
)@urql/preact
(since1.4.0
)urql
(since1.11.0
)graphql-request
(since5.0.0
)react-query
(with[email protected]
)swr
(with[email protected]
)@urql/exchange-graphcache
(since3.1.11
)@urql/svelte
(since1.1.3
)@vue/apollo-composable
(since4.0.0-alpha.13
)villus
(since1.0.0-beta.8
)@urql/vue
(since1.11.0
)graphql-js
(since15.2.0
)graphql-request
(since5.0.0
)You will find demos and code examples for each of them in the
examples/front-end/
folder of the codegen repository.You will also find a complete guide for React and Vue in codegen documentation.
We aim for GraphQL Code Generator 3.0’s client preset to become the official way to generate GraphQL Types for front-end use cases, replacing all existing hook and SDK-based plugins.
For this reason, we encourage you to already give a try at the codegen v3
client
preset (@graphql-codegen/client-presec
) and provide feedback on this issue.The v3 stable release will be shipped once sufficient feedback is posted.
Finally, while the GraphQL Code Generator
3.0
milestone aims to provide a unified front-end experience through thepreset: client
, the3.x
versions aim to fully rewrite the core packages of codegen.Some core parts of codegen are more than 6 years old and need to be rewritten (optimized, simplified, and more).
We plan to incorporate the pending issues related to the core packages in this gradual
3.x
milestones.Introduction of the “community plugins”
Historically, all plugins were pushed to the https://github.com/dotansimha/graphql-code-generator repository, making it hard for us to review all contributions in a reasonable timeframe and to enforce consistency across all the options introduced in the different packages.
We believe that the best way to keep codegen extensible and improve the contribution experience at scale is to introduce the concept of community plugins.
Soon, all the existing plugins part of the list below and all the future plugins created by the community will live in their dedicated repository:
@graphql-codegen/typescript-react-apollo
@graphql-codegen/typescript-graphql-request
@graphql-codegen/typescript-apollo-angular
@graphql-codegen/typescript-apollo-client-helpers
@graphql-codegen/typescript-react-query
@graphql-codegen/typescript-urql
@graphql-codegen/named-operations-object
@graphql-codegen/urql-introspection
@graphql-codegen/flow-resolvers
@graphql-codegen/typescript-vue-apollo
@graphql-codegen/typescript-rtk-query
@graphql-codegen/flow-operations
@graphql-codegen/typescript-msw
@graphql-codegen/typescript-mongodb
@graphql-codegen/typescript-type-graphql
@graphql-codegen/jsdoc
@graphql-codegen/typescript-vue-urql
@graphql-codegen/kotlin
@graphql-codegen/typescript-vue-apollo-smart-ops
@graphql-codegen/java
@graphql-codegen/c-sharp-operations
@graphql-codegen/hasura-allow-list
@graphql-codegen/typescript-stencil-apollo
@graphql-codegen/relay-operation-optimizer
@graphql-codegen/typescript-oclif
@graphql-codegen/java-resolvers
@graphql-codegen/java-apollo-android
All the above plugins will be eligible for repository ownership transfer based on relevant past contributions.
Of course, such a change will come with help from our side:
What about server-side plugins?
The
3.x
milestones include some work on server-side plugins such astypescript-resolvers
(ex: improving Federation support).Milestones
Below are the details of the aforementioned plans for the
3.0
and3.x
milestones.3.0
client
presetgraphql-request
https://github.com/prisma-labs/graphql-request/pull/350/filesgraphql-request
)graphql-request
)gql-tag-operation-preset
gql-tag-operations-preset
babelPlugin
doesn't work withvite
#8206documents
preset preconfigurationgql-tag-operations-preset
in favor of theclient-preset
preset: front-end
#8184graphql-scalars
#8413graphql-request
docs on their repoapollo-angular
docs3.x
preset: client
improvements→ feat: override operation field types via directives #8071
preset: client
to not use the old plugins (get rid of actual core packages)Future of codegen CLI
config
) → WIP 🚧DetailedError
which is not well-handled bylistr
#8200graphql
dependencyBack-end code generation issues
We will go over the following
typescript-resolvers
andgraphql-modules
pending plugins issues:Resolvers
#5517The text was updated successfully, but these errors were encountered: