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

docs: add graphql-tag-swc-plugin to performance docs #11884

Merged
merged 5 commits into from
Jun 12, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 40 additions & 4 deletions docs/source/performance/babel.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
---
title: Compiling queries with Babel
title: Compiling queries with Transpilers
---

If you prefer co-locating your GraphQL queries in your Javascript files, you typically use the [graphql-tag](https://github.com/apollographql/graphql-tag) library to write them. That requires to process the query strings into a GraphQL AST, which will add to the startup time of your application, especially if you have many queries.

To avoid this runtime overhead, you can precompile your queries created with `graphql-tag` using [Babel](http://babeljs.io/). Here are two ways you can do this:
To avoid this runtime overhead, you can precompile your queries created with `graphql-tag` using transpilers like [Babel](http://babeljs.io/) and [SWC](https://swc.rs). Here are possible ways you can do this:

1. Using [babel-plugin-graphql-tag](#using-babel-plugin-graphql-tag)
2. Using [graphql-tag.macro](#using-graphql-tagmacro)
1. Using [ts-transform-graphql-tag](#using-ts-transform-graphql-tag) for TypeScript
2. Using [graphql-tag-swc-plugin](#using-graphql-tag-swc-plugin)
3. Using [graphql-tag.macro](#using-graphql-tagmacro)
4. Using [ts-transform-graphql-tag](#using-ts-transform-graphql-tag) for TypeScript

If you prefer to keep your GraphQL code in separate files (`.graphql` or `.gql`) you can use [babel-plugin-import-graphql](https://github.com/detrohutt/babel-plugin-import-graphql). This plugin still uses `graphql-tag` under the hood, but transparently. You simply `import` your operations/fragments as if each were an export from your GraphQL file. This carries the same precompilation benefits as the above approaches.

Expand Down Expand Up @@ -38,6 +39,41 @@ Then add the plugin in your `.babelrc` configuration file:

And that's it! All the usages of `import gql from 'graphql-tag'` will be removed, and the calls to `gql` will be replaced by the compiled version.

## Using graphql-tag-swc-plugin

This plugin is the same as [babel-plugin-graphql-tag](#using-babel-plugin-graphql-tag) but for [swc](https://swc.rs/), a fast rust based babel alternative.

Install the plugin in your dev dependencies:

```
# with npm
npm install --save-dev graphql-tag-swc-plugin

# or with yarn
yarn add --dev graphql-tag-swc-plugin
```

Then add the plugin in your `.swcrc` configuration file:

```
{
jsc: {
experimental: {
plugins: [
["graphql-tag-swc-plugin",
{
importSources: ["@apollo/client", "graphql-tag"],
gqlTagIdentifiers: ["gql"]
},
],
],
},
},
}
```

For more information on configuration and features, please checkout the [`graphql-tag-swc-plugin`](https://github.com/rishabh3112/graphql-tag-swc-plugin) documentation.

## Using graphql-tag.macro

This approach is a bit more explicit, since you change all your usages of `graphql-tag` for `graphql-tag.macro`, which exports a `gql` function that you can use the same way as the original one. This macro requires the [babel-macros](https://github.com/kentcdodds/babel-macros) plugin, which will do the same as the previous approach but only on the calls that come from the macro import, leaving regular calls to the `graphql-tag` library untouched.
Expand Down
Loading