luckycatfactory / esbuild-graphql-loader Goto Github PK
View Code? Open in Web Editor NEWAn esbuild Plugin Allowing for GraphQL File imports
An esbuild Plugin Allowing for GraphQL File imports
As brought up here, it would probably be a good idea to support GraphQL imports with quotes. For example:
#import "./something.gql"
I am seeing the following when using a file with multiple queries/mutations in one file
> pnp:/code/index.ts:6:4: error: No matching export for import "BigQuery"
6 │ BigQuery,
╵ ~~~~~~~~~~~~~~~~~~~~~
I'm guessing because there's only default exports in this plugin?
fragment RecipientFragment on Address {
address
}
fragment ListMessageFragment on ListMessage {
recipient {
...RecipientFragment
}
}
fragment MessageFragment on MailboxMessagesConnection {
nodes {
...ListMessageFragment
}
}
build({
entryPoints: ["src/index.js"],
outdir: "build/t",
sourcemap: true,
bundle: true,
target: ["firefox91", "chrome93"],
loader: { ".js": "jsx", ".svg": "text" },
plugins: [
graphqlLoaderPlugin.default({}),
],
}).catch(() => process.exit(1));
While the files get bundled and graphql-tag
ed correctly, the fragments are just not included...
I'm not sure where to look, to narrow down this issue.
Any help is greatly appreciated!
{
"@luckycatfactory/esbuild-graphql-loader": "^3.7.0",
"esbuild": "^0.13.12",
"graphql-tag": "^2.12.5",
}
plugins: [graphqlLoaderPlugin()],
^
TypeError: graphqlLoaderPlugin is not a function
Trying to use your example but I'm somehow getting this error.
I recently started a repo with a list of links to esbuild plugins so other people can find them. And I just merged a PR to add this plugin to the list of esbuild plugins: esbuild/community-plugins#3.
However, I realized after merging the PR that the person who filed the PR may not be the package author. If that's the case, please confirm that you want your plugin on this list and that the description is what you want it to be. I'm happy to change the description or remove the package if you'd prefer for it to not be on the list.
Sorry about the oversight.
Hi, running on Node 16 and Esbuild 0.15 (via Tsup), the default export is not correctly defined.
I need to do:
import graphqlLoaderPluginPkg from '@luckycatfactory/esbuild-graphql-loader';
const graphqlLoaderPlugin = (graphqlLoaderPluginPkg as any).default
Similar issue with yaml: martonlederer/esbuild-plugin-yaml#3
Thanks for the two previous updates @louisscruz 🙌🏻
There's one final optimisation that you can make, which could be important given that esbuild's major feature is performance. At the moment it seems like for every imported file you're also reading and parsing the file which means if you have 2 .graphql
files that import sharedFragment.ts
, that file will actually be read and parsed 3 times. The result of your plugin is passed directly to the js
loader of esbuild, which handles the parsing and loading of imports by itself, so you can just transform the text in a single file, pass the result to esbuild and let it handle the recursion of the files for imports etc.
I could well have misunderstood the code so feel free to tell me that's not what it's doing!
I have a large schema.graphql
file (generated by KeystoneJS) and thought I could just import a single mutation from it as a named import, but I'm getting an error that it couldn't be found:
No matching export in "schema.graphql" for import "updateDeployments"
Here's my test code:
import { GraphQLClient } from 'graphql-request';
import { updateDeployments } from '../../schema.graphql';
import { authenticateUser } from '../graphql/graphqlMutations';
const graphQLClient = new GraphQLClient(process.env.GRAPHQL_API_ENDPOINT);
(async () => {
await authenticateUser(graphQLClient, { email: process.env.GRAPHQL_USER, password: process.env.GRAPHQL_PASSWORD });
const res = await graphQLClient.request(updateDeployments, {
data: { where: { id: { equals: 'a51d87d7-29c9-4e19-98c0-db766190edc5' } }, data: { status: 'pending' } },
});
console.log(res);
})();
The mutatio is listed in a block with a lot of others:
...
type Mutation {
...
updateDeployments(data: [DeploymentUpdateArgs!]!): [Deployment]
...
}
...
Should this work? I've succesfully used the plugin when importing a mutation from a file where only one is defined.
I'm using v3.7.0.
Hey there 👋
This code:
// result.ts
import * as createEvent from './createEvent.graphql';
with this configuration:
const graphqlLoaderPluginInstance = graphqlLoaderPlugin({
mapDocumentNode: (documentNode: DocumentNode) =>
optimizeDocumentNode(documentNode),
})
build({
entryPoints: files,
format: 'cjs',
outdir: 'dist/cjs',
jsx: 'transform',
bundle: false,
minify: isProduction,
sourcemap: !isProduction,
platform: 'node',
target,
plugins: [graphqlLoaderPluginInstance],
}).catch((error) => {
console.log(error)
process.exit(1)
})
results in
// result.js
var createEvent = __toESM(require("./createEvent.graphql"));
Shouldn't the .graphql file be bundled into the request.ts
A example project would help me a lot understanding what should we the result.
It's already merged, but not released.
As brought up with #19, we should allow for newer versions of ESBuild to be used.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.