Our great sponsors
-
For more information/ a history of this functionality, you can read more about it in this blog post from Laurin Quast about this new client-preset feature: Unleash the Power of Fragments with GraphQL Code Generator. It was based on the former gql-tag-operations-preset that is now replaced by the client-preset, which was originally explored by Maël Nison in this Github project.
-
or with Vite React, update your `vite.config.ts` to add the following: ```ts filename="vite.config.ts" import { defineConfig } from 'vite' import react from '@vitejs/plugin-react-swc' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ react({ plugins: [ [ '@graphql-codegen/client-preset-swc-plugin', { artifactDirectory: './src/gql', gqlTagName: 'graphql' } ] ] }) ] })
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
Then you're ready to go! The plugin will automatically optimize your generated code when SWC compiles your files. In conclusion, using the [`client-preset`](https://graphql-code-generator.com/plugins/presets/client-preset) for GraphQL Code Generator is a powerful way to improve the DX of your project. However, without proper optimization, the bundle size can quickly become bloated. By using the [@graphql-codegen/client-preset-swc-plugin](https://www.npmjs.com/package/@graphql-codegen/client-preset-swc-plugin), (or the [Babel plugin](https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#babel-plugin)) you can optimize the generated code and reduce the bundle size, and in the end improve the loading time of your application.
-
There was already a Babel plugin for the client-preset for projects using Babel in the client-preset package. Now, as SWC itself, and Next.js is becoming more popular and uses SWC as its default compiler, there was a need for a SWC plugin as well. SWC is a fast and modern JavaScript/TypeScript compiler written in Rust, so the Babel plugin couldn't be used.
-
However, this approach can come at a cost - the bundle size of your pages can increase significantly, especially as the number of queries and mutation grows. In this post, we will show you what the problem is and how to optimize your bundle size with the new @graphql-codegen/client-preset-swc-plugin plugin for your applications supported by the SWC compiler such as projects using Next.js or Vite.
-
There was already a Babel plugin for the client-preset for projects using Babel in the client-preset package. Now, as SWC itself, and Next.js is becoming more popular and uses SWC as its default compiler, there was a need for a SWC plugin as well. SWC is a fast and modern JavaScript/TypeScript compiler written in Rust, so the Babel plugin couldn't be used.