graphql-kit / graphql-lodash

🛠 Data manipulation for GraphQL queries with lodash syntax
https://apis.guru/graphql-lodash/
MIT License
1.23k stars 50 forks source link

Include `graphql-lodash.bundle.js` in distribution. #18

Closed k00p closed 5 years ago

k00p commented 5 years ago

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 commented 5 years ago

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

k00p commented 5 years ago

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 commented 5 years ago

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