leoasis / Graphql Tag.macro
Licence: mit
Babel Macro for graphql-tag
Stars: β 168
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Graphql Tag.macro
Graphql Starter
π₯ Monorepo template (seed project) pre-configured with GraphQL API, PostgreSQL, React, Relay, and Material UI.
Stars: β 3,377 (+1910.12%)
Mutual labels: graphql, babel
Entria Fullstack
Monorepo Playground with GraphQL, React, React Native, Relay Modern, TypeScript and Jest
Stars: β 434 (+158.33%)
Mutual labels: graphql, babel
Next Shopify Storefront
π A real-world Shopping Cart built with TypeScript, NextJS, React, Redux, Apollo Client, Shopify Storefront GraphQL API, ... and Material UI.
Stars: β 317 (+88.69%)
Mutual labels: graphql, babel
Pizzaql
π Modern OSS Order Management System for Pizza Restaurants
Stars: β 631 (+275.6%)
Mutual labels: graphql, babel
Babel Blade
(under new management!) βΈοΈSolve the Double Declaration problem with inline GraphQL. Babel plugin/macro that works with any GraphQL client!
Stars: β 266 (+58.33%)
Mutual labels: graphql, babel
Apollo Upload Examples
A full stack demo of file uploads via GraphQL mutations using Apollo Server and apollo-upload-client.
Stars: β 358 (+113.1%)
Mutual labels: graphql, babel
Woo Next
π React WooCommerce theme, built with Next JS, Webpack, Babel, Node, Express, using GraphQL and Apollo Client
Stars: β 342 (+103.57%)
Mutual labels: graphql, babel
React App
Create React App with server-side code support
Stars: β 614 (+265.48%)
Mutual labels: graphql, babel
Language Babel
ES2017, flow, React JSX and GraphQL grammar and transpilation for ATOM
Stars: β 476 (+183.33%)
Mutual labels: graphql, babel
Crate
π π π¦ A sample web and mobile application built with Node, Express, React, React Native, Redux and GraphQL. Very basic replica of stitchfix.com / krate.in (allows users to get monthly subscription of trendy clothes and accessories).
Stars: β 2,281 (+1257.74%)
Mutual labels: graphql, babel
Serverless Prisma
AWS Serverless Prisma Boilerplate
Stars: β 126 (-25%)
Mutual labels: graphql, babel
Graphpack
βοΈ A minimalistic zero-config GraphQL server.
Stars: β 1,994 (+1086.9%)
Mutual labels: graphql, babel
Ssr Sample
A minimum sample of Server-Side-Rendering, Single-Page-Application and Progressive Web App
Stars: β 285 (+69.64%)
Mutual labels: graphql, babel
React Starter Kit
React Starter Kit β front-end starter kit using React, Relay, GraphQL, and JAM stack architecture
Stars: β 21,060 (+12435.71%)
Mutual labels: graphql, babel
Tkframework
react + relay + redux + saga + graphql + webpack
Stars: β 83 (-50.6%)
Mutual labels: graphql, babel
Project Webcube
Continuously updated JS infrastructure for modern web dev
Stars: β 141 (-16.07%)
Mutual labels: graphql, babel
Examples
Examples of Mock Service Worker usage with various frameworks and libraries.
Stars: β 163 (-2.98%)
Mutual labels: graphql
React Redux Universal Boilerplate
An Universal ReactJS/Redux Boilerplate
Stars: β 165 (-1.79%)
Mutual labels: babel
Vendure
A headless GraphQL ecommerce framework for the modern web
Stars: β 2,961 (+1662.5%)
Mutual labels: graphql
graphql-tag.macro
Babel Macro for the graphql-tag library.
What it does
It inlines the result of parsing the GraphQL queries with graphql-tag
.
Converts this:
const query = gql`
query {
hello {
world
}
}
`;
To this:
const query = {
'kind': 'Document',
'definitions': [{
'kind': 'OperationDefinition',
'operation': 'query',
'variableDefinitions': [],
'directives': [],
'selectionSet': {
'kind': 'SelectionSet',
'selections': [{
'kind': 'Field',
'alias': null,
'name': {
'kind': 'Name',
'value': 'hello'
},
'arguments': [],
'directives': [],
'selectionSet': {
'kind': 'SelectionSet',
'selections': [{
'kind': 'Field',
'alias': null,
'name': {
'kind': 'Name',
'value': 'world'
},
'arguments': [],
'directives': [],
'selectionSet': null
}]
}
}]
}
}],
'loc': {
'start': 0,
'end': 45,
'source': {
'body': '\\\\n query {\\\\n hello {\\\\n world\\\\n }\\\\n }\\\\n',
'name': 'GraphQL request',
'locationOffset': {
'line': 1,
'column': 1
}
}
}
};
It also supports adding interpolated fragments:
const frag = gql`
fragment Frag on Hello {
world
}
`;
const query = gql`
query {
hello {
universe
...Frag
}
}
${frag}
`;
Why
To avoid the runtime overhead of parsing a string into a GraphQL AST.
Installation and setup
Install and configure babel-macros if you haven't already.
Then install this package:
# with yarn
yarn add -D graphql-tag.macro
# with npm
npm install -D graphql-tag.macro
Usage
The usage is the same as using graphql-tag directly, the only difference is that you have to import gql
from the macro now:
import gql from 'graphql-tag.macro';
const query = gql`
query {
hello {
world
}
}
`;
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].