luckycatfactory / esbuild-graphql-loader Goto Github PK

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-taged 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.