Include graphql-lodash.bundle.js in distribution.

[k00p]

This PR adds a build:dist script to package.json to include graphql-lodash.bundle.js in npm distribution, which gets copied from lib/ to a new directory dist/.

Sourcing the pre-built graphql-lodash.bundle.js is useful for scenarios where it is not feasible or desirable to build out a complete React application. For example, if you are integrating graphql-lodash in an express-graphql session, it is a fairly significant amount of work/code to set up the React stack and build out the GraphiQL interface, and then integrate graphql-lodash. It is relatively easy to build the graphql-lodash bundle, and include that as well as the GraphiQL bundle on a page as in the GraphiQL example.

The fetch function becomes:

      function grapQLLodashFetcher(graphQLParams) {
        const { query, transform } = window.GQLLodash.graphqlLodash(
          graphQLParams.query,
          graphQLParams.operationName
        );
        graphQLParams.query = query;
        return fetch('/graphql', {
          method: 'post',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(graphQLParams),
          credentials: 'include',
        }).then(function (response) {
          if (response.ok) {
            return response.json();
          } else {
            return response.text().then(body => {
              throw Error(response.status + ' ' + response.statusText + '\n' + body);
            });
          }
        }).then(function (responseBody) {
          responseBody.data = transform(responseBody.data);
          return responseBody;
        });
      }

Using a dist/ directory is fairly common practice for providing bundles, but another route may be preferred.

[k00p]

By the way - this project is a really fun idea. Thank you!

[IvanGoncharov]

@k00p Thanks for PR 👍
It looks great and I'm ready to merge.
But can you please remove this generated file from PR.

[k00p]

That file is intended to be a part of the PR. This way when this project is grabbed via npm/yarn the bundle is available.

Is there a reason for not including it?

[k00p]

Actually, we may be able to do this in the npm install script. Let me test...

[k00p]

OK, so here's the difficulty with that approach - if there is no webpack set up in the project before adding graphql-lodash, the package install fails:

$ yarn add APIs-guru/graphql-lodash#18/head
yarn add v1.13.0
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
error /mnt/c/temmmmmp/node_modules/graphql-lodash: Command failed.
Exit code: 1
Command: npm run build:bundle
Arguments:
Directory: /mnt/c/Workspace/temmmmmp/node_modules/graphql-lodash
Output:

> graphql-lodash@1.3.3 build:bundle /mnt/c/Workspace/temmmmmp/node_modules/graphql-lodash
> webpack -p --config webpack.config.js

module.js:549
    throw err;
    ^

Error: Cannot find module 'webpack'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/mnt/c/Workspace/temmmmmp/node_modules/graphql-lodash/webpack.config.js:1:79)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! graphql-lodash@1.3.3 build:bundle: `webpack -p --config webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the graphql-lodash@1.3.3 build:bundle script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/--/.npm/_logs/2019-02-20T22_06_31_406Z-debug.log
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

[k00p]

So, we are either looking at:

1. Seriously extending the install times and download overhead by pulling down webpack for the build of the bundle
2. Including the pre-generated bundle in the distribution
3. Squeezing shut our eyes at this use case and closing the PR

Suggestions?

[IvanGoncharov]

3. Squeezing shut our eyes at this use case and closing the PR

Look into node_modules/graphql-lodash/lib and see that graphql-lodash.bundle.js already there 🎉
On NPM you publishing your local folder and not a repo content.
Just run npm publish --dry-run and you will see all files included in the package.
I actually found out we have broken .npmignore and releasing a bunch of unneeded files, after the fix it looks like this:

[k00p]

https://observablehq.com/@mbostock/hello-dagre

An example of useful things that can be done when webpacks are included in repos.

In the lodash declaration the minimized JS is pulled from the lodash repo:

lodash = window.lodash = await require("lodash@4/lodash.min.js")

Any chance you would reconsider having the webpack available so that it could be used on "web REPL" apps like Observable or even in GraphiQL?

[IvanGoncharov]

@k00p You can use jsDeliver CDN:
https://cdn.jsdelivr.net/npm/graphql-lodash@1.3.4/lib/graphql-lodash.bundle.js