Skip to content
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

How to use codegen in front-end applications, code examples using preset: front-end #8184

Closed
wants to merge 18 commits into from

Conversation

charlypoly
Copy link
Contributor

@charlypoly charlypoly commented Aug 4, 2022

How to use codegen in front-end applications, code examples using gql-tag-operations-preset.

React

  • Apollo Client (CRA app)
  • URQL (CRA app)
  • graphql-request (CRA app)
  • Tanstack Query (CRA app)
  • SWR (Next.js app)

Vue

  • @vue/apollo-composable
  • @urql/vue
  • villus

Angular (wip 🚧)

Advanced

  • Optimized Babel setup

@charlypoly charlypoly self-assigned this Aug 4, 2022
@changeset-bot
Copy link

changeset-bot bot commented Aug 4, 2022

⚠️ No Changeset found

Latest commit: f6a19d0

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel
Copy link

vercel bot commented Aug 4, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
graphql-code-generator ❌ Failed (Inspect) Aug 17, 2022 at 1:48PM (UTC)

@charlypoly charlypoly changed the title examples(front-end): add react apollo client example How to use codegen in front-end applications, code examples using gql-tag-operations-preset Aug 4, 2022
@charlypoly charlypoly marked this pull request as draft August 10, 2022 09:40
@Parables
Copy link
Contributor

Parables commented Aug 12, 2022

@charlypoly I think we need another example for Dart/Flutter using the flutter-freezed plugin #8171.

I would be happy to provide that, just let me know how you expect it to be and I will get it done.

@charlypoly
Copy link
Contributor Author

@charlypoly I think we need another example for Dart/Flutter using the flutter-freezed plugin #8171.

I would be happy to provide that, just let me know how you expect it to be and I will get it done.

@Parables, this PR is especially focused on front-end examples but yes, feel free to create a PR for a sample app in a new dart/ folder 😉

@Parables
Copy link
Contributor

Parables commented Aug 13, 2022

focused on front-end examples but yes, feel free to create a PR for a sample app in a new dart/ folder

@charlypoly Coming right up

@charlypoly charlypoly assigned kamilkisiela and unassigned saihaj Aug 17, 2022
@charlypoly charlypoly changed the title How to use codegen in front-end applications, code examples using gql-tag-operations-preset How to use codegen in front-end applications, code examples using preset: front-end Aug 18, 2022
@Parables
Copy link
Contributor

@Parables, this PR is especially focused on front-end examples but yes, feel free to create a PR for a sample app in a new dart/ folder

Erm, a little help here: @charlypoly
What specifically am I working on?

Looking through the examples directory,
I am guessing this is like a starter template that people can just clone
and use for their projects.

Please correct me if I am wrong.

Thank you

@charlypoly
Copy link
Contributor Author

@Parables

Looking through the examples directory,
I am guessing this is like a starter template that people can just clone
and use for their projects.

yes, exactly!
The idea is to provide example on how people could setup codegen in a given target framework, ex: React, Dart, etc.

@Parables
Copy link
Contributor

Parables commented Aug 22, 2022

@Parables

Looking through the examples directory,
I am guessing this is like a starter template that people can just clone
and use for their projects.

yes, exactly! The idea is to provide example on how people could setup codegen in a given target framework, ex: React, Dart, etc.

Okay, let me provide that right away @charlypoly

@Parables
Copy link
Contributor

@charlypoly, there seem to be some breaking changes with the freezed package.

Working on a fix on the plugin as well as the docs with the examples

@Parables
Copy link
Contributor

@charlypoly, I have created a PR with the fix here: #8273

Please take a look at it and accept it for me.

Also, I can't access the examples-front-end branch in my fork so once this PR is accepted,
I will send you a zip file with the dart example so that you can add it to the examples

Thanks very much for your time and support.

Sincerely grateful,
Parables

@Parables
Copy link
Contributor

@charlypoly yarn build throws the following error

 ╰─λ yarn build
yarn run v1.22.18
$ rimraf dist/ .bob/ tsconfig.tsbuildinfo
$ bob build
Error: Command failed with exit code 2: npx tsc --module es2022 --sourceMap false --inlineSourceMap false --outDir /run/media/parables/ParaDisk/workspace/packages/my-packages/graphql-code-generator/.bob/esm
packages/graphql-codegen-cli/tests/codegen.spec.ts(20,24): error TS2345: Argument of type '{ legacyFakeTimers: boolean; }' is not assignable to parameter of type '"legacy" | "modern"'.
packages/presets/graphql-modules/tests/integration.spec.ts(28,24): error TS2345: Argument of type '{ legacyFakeTimers: boolean; }' is not assignable to parameter of type '"legacy" | "modern"'.
    at makeError (/run/media/parables/ParaDisk/workspace/packages/my-packages/graphql-code-generator/node_modules/execa/lib/error.js:60:11)
    at handlePromise (/run/media/parables/ParaDisk/workspace/packages/my-packages/graphql-code-generator/node_modules/execa/index.js:118:26)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async buildTypeScript (/run/media/parables/ParaDisk/workspace/packages/my-packages/graphql-code-generator/node_modules/bob-the-bundler/dist/commands/build.js:62:33)
    at async Object.handler (/run/media/parables/ParaDisk/workspace/packages/my-packages/graphql-code-generator/node_modules/bob-the-bundler/dist/commands/build.js:116:13) {
  shortMessage: 'Command failed with exit code 2: npx tsc --module es2022 --sourceMap false --inlineSourceMap false --outDir /run/media/parables/ParaDisk/workspace/packages/my-packages/graphql-code-generator/.bob/esm',
  command: 'npx tsc --module es2022 --sourceMap false --inlineSourceMap false --outDir /run/media/parables/ParaDisk/workspace/packages/my-packages/graphql-code-generator/.bob/esm',
  escapedCommand: 'npx tsc --module es2022 --sourceMap false --inlineSourceMap false --outDir "/run/media/parables/ParaDisk/workspace/packages/my-packages/graphql-code-generator/.bob/esm"',
  exitCode: 2,
  signal: undefined,
  signalDescription: undefined,
  stdout: `packages/graphql-codegen-cli/tests/codegen.spec.ts(20,24): error TS2345: Argument of type '{ legacyFakeTimers: boolean; }' is not assignable to parameter of type '"legacy" | "modern"'.\n` +
    `packages/presets/graphql-modules/tests/integration.spec.ts(28,24): error TS2345: Argument of type '{ legacyFakeTimers: boolean; }' is not assignable to parameter of type '"legacy" | "modern"'.`,
  stderr: '',
  failed: true,
  timedOut: false,
  isCanceled: false,
  killed: false
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

@charlypoly
Copy link
Contributor Author

charlypoly commented Aug 23, 2022

@charlypoly yarn build throws the following error

 ╰─λ yarn build
yarn run v1.22.18
$ rimraf dist/ .bob/ tsconfig.tsbuildinfo
$ bob build
Error: Command failed with exit code 2: npx tsc --module es2022 --sourceMap false --inlineSourceMap false --outDir /run/media/parables/ParaDisk/workspace/packages/my-packages/graphql-code-generator/.bob/esm
packages/graphql-codegen-cli/tests/codegen.spec.ts(20,24): error TS2345: Argument of type '{ legacyFakeTimers: boolean; }' is not assignable to parameter of type '"legacy" | "modern"'.
packages/presets/graphql-modules/tests/integration.spec.ts(28,24): error TS2345: Argument of type '{ legacyFakeTimers: boolean; }' is not assignable to parameter of type '"legacy" | "modern"'.
    at makeError (/run/media/parables/ParaDisk/workspace/packages/my-packages/graphql-code-generator/node_modules/execa/lib/error.js:60:11)
    at handlePromise (/run/media/parables/ParaDisk/workspace/packages/my-packages/graphql-code-generator/node_modules/execa/index.js:118:26)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async buildTypeScript (/run/media/parables/ParaDisk/workspace/packages/my-packages/graphql-code-generator/node_modules/bob-the-bundler/dist/commands/build.js:62:33)
    at async Object.handler (/run/media/parables/ParaDisk/workspace/packages/my-packages/graphql-code-generator/node_modules/bob-the-bundler/dist/commands/build.js:116:13) {
  shortMessage: 'Command failed with exit code 2: npx tsc --module es2022 --sourceMap false --inlineSourceMap false --outDir /run/media/parables/ParaDisk/workspace/packages/my-packages/graphql-code-generator/.bob/esm',
  command: 'npx tsc --module es2022 --sourceMap false --inlineSourceMap false --outDir /run/media/parables/ParaDisk/workspace/packages/my-packages/graphql-code-generator/.bob/esm',
  escapedCommand: 'npx tsc --module es2022 --sourceMap false --inlineSourceMap false --outDir "/run/media/parables/ParaDisk/workspace/packages/my-packages/graphql-code-generator/.bob/esm"',
  exitCode: 2,
  signal: undefined,
  signalDescription: undefined,
  stdout: `packages/graphql-codegen-cli/tests/codegen.spec.ts(20,24): error TS2345: Argument of type '{ legacyFakeTimers: boolean; }' is not assignable to parameter of type '"legacy" | "modern"'.\n` +
    `packages/presets/graphql-modules/tests/integration.spec.ts(28,24): error TS2345: Argument of type '{ legacyFakeTimers: boolean; }' is not assignable to parameter of type '"legacy" | "modern"'.`,
  stderr: '',

@Parables, make sure your branch is up-to-date with master

@Parables
Copy link
Contributor

Parables commented Aug 23, 2022 via email

@charlypoly
Copy link
Contributor Author

I always sync with upstream before I do anything else. All the same, I will try again and get back to you

On Tue, Aug 23, 2022, 8:35 AM Charly POLY @.> wrote: @charlypoly https://github.com/charlypoly yarn build throws the following error ╰─λ yarn build yarn run v1.22.18 $ rimraf dist/ .bob/ tsconfig.tsbuildinfo $ bob build Error: Command failed with exit code 2: npx tsc --module es2022 --sourceMap false --inlineSourceMap false --outDir /run/media/parables/ParaDisk/workspace/packages/my-packages/graphql-code-generator/.bob/esm packages/graphql-codegen-cli/tests/codegen.spec.ts(20,24): error TS2345: Argument of type '{ legacyFakeTimers: boolean; }' is not assignable to parameter of type '"legacy" | "modern"'. packages/presets/graphql-modules/tests/integration.spec.ts(28,24): error TS2345: Argument of type '{ legacyFakeTimers: boolean; }' is not assignable to parameter of type '"legacy" | "modern"'. at makeError (/run/media/parables/ParaDisk/workspace/packages/my-packages/graphql-code-generator/node_modules/execa/lib/error.js:60:11) at handlePromise (/run/media/parables/ParaDisk/workspace/packages/my-packages/graphql-code-generator/node_modules/execa/index.js:118:26) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async buildTypeScript (/run/media/parables/ParaDisk/workspace/packages/my-packages/graphql-code-generator/node_modules/bob-the-bundler/dist/commands/build.js:62:33) at async Object.handler (/run/media/parables/ParaDisk/workspace/packages/my-packages/graphql-code-generator/node_modules/bob-the-bundler/dist/commands/build.js:116:13) { shortMessage: 'Command failed with exit code 2: npx tsc --module es2022 --sourceMap false --inlineSourceMap false --outDir /run/media/parables/ParaDisk/workspace/packages/my-packages/graphql-code-generator/.bob/esm', command: 'npx tsc --module es2022 --sourceMap false --inlineSourceMap false --outDir /run/media/parables/ParaDisk/workspace/packages/my-packages/graphql-code-generator/.bob/esm', escapedCommand: 'npx tsc --module es2022 --sourceMap false --inlineSourceMap false --outDir "/run/media/parables/ParaDisk/workspace/packages/my-packages/graphql-code-generator/.bob/esm"', exitCode: 2, signal: undefined, signalDescription: undefined, stdout: packages/graphql-codegen-cli/tests/codegen.spec.ts(20,24): error TS2345: Argument of type '{ legacyFakeTimers: boolean; }' is not assignable to parameter of type '"legacy" | "modern"'.\n + packages/presets/graphql-modules/tests/integration.spec.ts(28,24): error TS2345: Argument of type '{ legacyFakeTimers: boolean; }' is not assignable to parameter of type '"legacy" | "modern"'., stderr: '', @Parables https://github.com/Parables, make sure your branch is up-to-date with master — Reply to this email directly, view it on GitHub <#8184 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJDDF3V3GGCNY3RVTB2CTFTV2SEOVANCNFSM55S3LHLA . You are receiving this because you were mentioned.Message ID: @.>

Okay, then, make sure to do yarn install at the root of the project
The typing error you get is linked to a recent update on jest

@Parables
Copy link
Contributor

Parables commented Aug 24, 2022 via email

@charlypoly
Copy link
Contributor Author

Merged with #8248 PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants