gajus / Babel Plugin Graphql Tag
Licence: other
Compiles GraphQL tagged template strings using graphql-tag.
Stars: ✭ 156
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Babel Plugin Graphql Tag
Babel Plugin Import Graphql
Enables import syntax for .graphql and .gql files
Stars: ✭ 284 (+82.05%)
Mutual labels: graphql, babel-plugin
Graphql Let
A layer to start/scale the use of GraphQL code generator.
Stars: ✭ 282 (+80.77%)
Mutual labels: graphql, babel-plugin
Babel Blade
(under new management!) ⛸️Solve the Double Declaration problem with inline GraphQL. Babel plugin/macro that works with any GraphQL client!
Stars: ✭ 266 (+70.51%)
Mutual labels: graphql, babel-plugin
Magiql
🌐 💫 Simple and powerful GraphQL Client, love child of react-query ❤️ relay
Stars: ✭ 45 (-71.15%)
Mutual labels: graphql, babel-plugin
Gatsby Wpgraphql Blog Example
Demo showing how to use WPGraphQL as the source for Gatsby Sites
Stars: ✭ 152 (-2.56%)
Mutual labels: graphql
Apollo Opentracing
Performance trace your Apollo GraphQL server with Opentracing
Stars: ✭ 154 (-1.28%)
Mutual labels: graphql
Fakerql
Hosted faker GraphQL endpoint for frontend developers
Stars: ✭ 152 (-2.56%)
Mutual labels: graphql
Graphql Jpa
JPA Implementation of GraphQL (builds on graphql-java)
Stars: ✭ 156 (+0%)
Mutual labels: graphql
Countries
🌎 Public GraphQL API for information about countries
Stars: ✭ 156 (+0%)
Mutual labels: graphql
Next Graphql Blog
🖊 A Blog including a server and a client. Server is built with Node, Express & a customized GraphQL-yoga server. Client is built with React, Next js & Apollo client.
Stars: ✭ 152 (-2.56%)
Mutual labels: graphql
Graphql Java Spring Boot Example
Sample GraphQL server implemented with graphql-java and Spring Boot
Stars: ✭ 155 (-0.64%)
Mutual labels: graphql
Appsync Refarch Realtime
AWS AppSync Real-Time Reference Architecture
Stars: ✭ 153 (-1.92%)
Mutual labels: graphql
Reactconfbr
Public infos and issues about React Conf Brasil organization
Stars: ✭ 156 (+0%)
Mutual labels: graphql
Babel Plugin Object To Json Parse
This plugin converts object literal to JSON.parse
Stars: ✭ 151 (-3.21%)
Mutual labels: babel-plugin
Payload
Headless CMS and Application Framework built with Node.js, React and MongoDB
Stars: ✭ 154 (-1.28%)
Mutual labels: graphql
Knests
Full-stack boilerplate (project/hackathon starter) with Docker/NodeJS/Typescript/GraphQL/React/Material-UI
Stars: ✭ 156 (+0%)
Mutual labels: graphql
Graphql Kafka Subscriptions
Apollo graphql subscriptions over Kafka protocol
Stars: ✭ 154 (-1.28%)
Mutual labels: graphql
babel-plugin-graphql-tag
Compiles GraphQL tagged template strings using graphql-tag.
Motivation
Compiling GraphQL queries at the build time:
- reduces the script initialization time; and
- removes the
graphql-tag
dependency
Removing the graphql-tag
dependency from the bundle saves approx. 50 KB.
Implementation
- Searches for imports of
graphql-tag
and removes them. - Searches for tagged template literals with
gql
identifier and compiles them usinggraphql-tag
.
Example compilation
Input:
import gql from 'graphql-tag';
// if using apollo v3
import { gql } from '@apollo/client';
const foo = gql`query {bar}`;
Output:
const foo = {
"definitions": [
{
"directives": [
],
"kind": "OperationDefinition",
"operation": "query",
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"alias": null,
"arguments": [
],
"directives": [
],
"kind": "Field",
"name": {
"kind": "Name",
"value": "bar"
},
"selectionSet": null
}
]
},
"variableDefinitions": [
]
}
],
"kind": "Document",
"loc": {
"end": 11,
"start": 0
}
};
NOTE: require() is also supported.
Using fragments
Using GraphQL fragments requires to:
- Define a fragment using
graphql-tag
. - Append the referenced fragment as a variable to the end of the GraphQL query.
Example:
import gql from 'graphql-tag';
const bar = gql`
fragment barFragment on Foo {
field1
field2
}
`;
const foo = gql`
query foo {
foo {
...barFragment
}
}
${bar}
`;
Options
-
importSources
- An array of names for modules to import (default =["graphql-tag", "@apollo/client"]
) -
onlyMatchImportSuffix
- Matches the end of the import instead of the entire name. Useful for relative imports, e.g../utils/graphql
(default = false) -
strip
- Strips insignificant characters such as whitespace from the original GraphQL string literal to reduce the size of compiled AST (default = false) -
transform
- By default, grapqhl query strings will be replaced with their AST representations, but you can override that behavior and do whatever you like. One possible use case would be to implement persisted queries: -
gqlTagIdentifiers
- An array of names for gql tag identifiers (default =["gql"]
)
// babel.config.js
plugins: [
[
"babel-plugin-graphql-tag",
{
strip: true,
transform: (source, ast) => {
const h = hash(source); // use your favorite hashing method
graphqlAstHashes[h] = ast; // write this to a file when compilation is complete
return {
queryId: h
};
}
}
]
]
Known Issues
Some cases are really hard to track down:
const apolloClient = require('@apollo/client');
// or
import apolloClient from '@apollo/client';
const { gql } = apolloClient;
const foo = gql`...`;
If you have this kind of syntax, this plugin won't work for you.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].