Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: remove graphql-utils and allow for the use of swc (#2176)
## What's the purpose of this pull request? This PR makes `@faststore/core` compatible with SWC by dropping the `@faststore/graphql-utils` package, meaning we don't depend on a babel-only plugin built by us. ## How it works? ### Why we did it [SWC](https://swc.rs/) is a compiler and bundler used by Next.js. It is the default bundler since Next.js 12 the default code minifier since Next.js 13. It promises considerable **performance** improvements when compared to [babel](https://babeljs.io/), its main competitor. Our use of a custom babel plugin - made available through `@faststore/graphql-utils` - made us unable to use SWC, since babel plugins are not compatible with SWC. This plugin helped us optimize GraphQL queries, improve security of queries and mutations and handle GraphQL operations definitions. When this plugin was first introduced, there wasn't a solution that could useful to us at the community, so we had to develop it ourselves. Now, The Guild's [client-preset](https://the-guild.dev/graphql/codegen/plugins/presets/preset-client) does exactly what we need. It provides a all-in-one tool for handling persisted queries (optimization & security) and a GraphQL helper (`gql`) for defining operations, among other things we already used as standalone solutions, like type generation for the schema. By using `client-preset` we're no longer bound to babel or SWC exclusively, as their solution doesn't rely on any of them. There are recommended plugins for both platforms, as it helps reduce bundle sizes. We also helps reduce the code we have to maintain, adopt community standards and get up do date in terms of bundling and compilation tools. ### Results After the store was migrated to use `client-preset`, I ran a few builds to see if there would be any difference in bundle size. The results were not great, as the SWC version increased the bundle size considerably while reducing the build time in a negligible way (~5s reduction, although ~20% reduction percentage wise). I wasn't able to make the SWC plugin work, and I think that's because we're on Next 12. The support for SWC plugins within Next.js is still experimental (even in Next.js 13) and these errors are expected. It will probably work when we migrate to it, tho. I also ran a comparison considering the client-preset with the community babel plugin, and the results were comparable to the ones we had before, time-wise as well. **Click on the images** to read the data. | Before (babel, custom plugin) | After (SWC, no plugins) | After (babel, community plugin) | | ------------- | ------------- | ------------- | | <img src="https://github.com/vtex/faststore/assets/8127610/3c2b5dc1-e4ce-41b1-86fa-6e21d933c67a" width="400"> |<img src="https://github.com/vtex/faststore/assets/8127610/38a72e9f-f19c-487d-8124-f668b4c011a6" width="400"> | <img src="https://github.com/vtex/faststore/assets/8127610/b5064fd9-6de2-4cd1-8880-e7b570dc2a05" width="400"> | ![tempo-babel-custom-plugin](https://github.com/vtex/faststore/assets/8127610/6c045af0-413e-43fe-a124-95cc2a58304f) | ![tempo-swc-no-plugin](https://github.com/vtex/faststore/assets/8127610/bb5e4e77-cc15-4ef5-86e2-4dd79e70a79b) | ![tempo-babel-community-plugin](https://github.com/vtex/faststore/assets/8127610/279bada6-5168-4405-a536-063777050993) | ### Implementation details #### operationName We previously used the operation name to identify queries and mutations on the backend. `client-preset` creates hashes based on the operation name to do the same thing. I updated the code to comply with this change, but added the operation name to the query arguments so 1. It could be provided to `envelop` on the `execute` function 2. It could be used for debugging when inspecting network calls using the browser dev tools To do that, I used `client-preset` `onExecutableDocumentNode` hook and extracted it manually at the `codegen.ts` config file. #### @generated dir Previously, the schema and other GraphQL files were inside the `@generated/graphql` folder. I changed it to `@generated` directly so `@generated/graphql` imports wouldn't break. It would be a pain to change all files, and we don't currently have other generated files other than graphql files, so it made sense to change it. #### SWC minification I enabled SWC minification at `next.config.js` since it is already the default minification tool Next 13. It provided awesome results, decreasing the build time in 10s to 15s. ## How to test it? This is a breaking change, as we know use the `gql` helper function and how to use it. We already exported it from `@faststore/core/api`, but it was possible to import it from `@faststore/graphql-utils` as well. Importing it from `@faststore/core/api` is the only possible and recommended way from now on. At the code, users also have to change the `gql` call to an actual function call: ```ts // Before const query = gql`query here` // After const query = gql(`query here`) ``` This change only affects stores containing API Extensions. Users shouldn't feel anything different when browsing the website. ### Starters Deploy Preview vtex-sites/starter.store#334 ## References https://the-guild.dev/graphql/codegen/plugins/presets/preset-client https://the-guild.dev/blog/optimize-bundle-size-with-swc-and-graphql-codegen I read this code a bunch to figure out how client-preset worked and how to use the options: https://github.com/dotansimha/graphql-code-generator/blob/master/packages/presets/client/src/index.ts https://nextjs.org/docs/messages/swc-minify-enabled https://nextjs.org/docs/architecture/nextjs-compiler dotansimha/graphql-code-generator#9057 --------- Co-authored-by: Mariana Caetano Pereira <67270558+Mariana-Caetano@users.noreply.github.com> Co-authored-by: Fanny Chien <fanny.chien@vtex.com.br>
- Loading branch information