Added Lacinia as an available feature #322

nrakochy · 2017-10-17T06:42:47Z

This pull request adds a bare-bones example of Lacinia as an available template.

I'm not sure best practice for integration with compojure-api, so I simplified the endpoint, which requires a POST with a query param.

Otherwise, it is essentially a drop-in replacement for swagger.

Thanks for the great template, and please let me know if there's anything that needs to be changed...

yogthos · 2017-10-18T01:48:19Z

Thanks, that looks really great. I'm thinking might be better to call the profile +graphql, just to keep it more generic.

nrakochy · 2017-10-18T15:29:14Z

There is a Graphiql client example from lacinia-pedestal that might be good to include. It uses a websocket at /graphql-ws so I'm not sure if that needs to be server specific or what the best way to implement that feature might be from a lein templating standpoint -

<!--
 *  Copyright (c) 2015, Facebook, Inc.
 *  All rights reserved.
 *
 *  This source code is licensed under the license found in the
 *  LICENSE file in the root directory of this source tree.
 *
-->
<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        width: 100%;
        overflow: hidden;
      }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/graphiql/0.11.5/graphiql.css" />
    <script src="https://cdn.jsdelivr.net/fetch/0.9.0/fetch.min.js"></script>
    <script src="https://cdn.jsdelivr.net/react/0.14.7/react.min.js"></script>
    <script src="https://cdn.jsdelivr.net/react/0.14.7/react-dom.min.js"></script>
    <script src="https://unpkg.com/[email protected]/browser/client.js"></script>
    <script src="https://unpkg.com/[email protected]/browser/client.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/graphiql/0.11.5/graphiql.js"></script>
  </head>
  <body>
    Loading...
    <script>
      /**
       * This GraphiQL example illustrates how to use some of GraphiQL's props
       * in order to enable reading and updating the URL parameters, making
       * link sharing of queries a little bit easier.
       *
       * This is only one example of this kind of feature, GraphiQL exposes
       * various React params to enable interesting integrations.
       */
      // Parse the search string to get url parameters.
      var search = window.location.search;
      var parameters = {};
      search.substr(1).split('&').forEach(function (entry) {
        var eq = entry.indexOf('=');
        if (eq >= 0) {
          parameters[decodeURIComponent(entry.slice(0, eq))] =
            decodeURIComponent(entry.slice(eq + 1));
        }
      });
      // if variables was provided, try to format it.
      if (parameters.variables) {
        try {
          parameters.variables =
            JSON.stringify(JSON.parse(parameters.variables), null, 2);
        } catch (e) {
          // Do nothing, we want to display the invalid JSON as a string, rather
          // than present an error.
        }
      }
      // When the query and variables string is edited, update the URL bar so
      // that it can be easily shared
      function onEditQuery(newQuery) {
        parameters.query = newQuery;
        updateURL();
      }
      function onEditVariables(newVariables) {
        parameters.variables = newVariables;
        updateURL();
      }
      function computeParams() {
        return '?' + Object.keys(parameters).map(function (key) {
          return encodeURIComponent(key) + '=' +
            encodeURIComponent(parameters[key]);
        }).join('&');
      }
      function updateURL() {
        history.replaceState(null, null, computeParams());
      }
      // Defines a GraphQL fetcher using the fetch API.
      function graphQLFetcher(graphQLParams) {
        console.log(graphQLParams);
        return fetch(window.location.origin + '/graphql' + computeParams(), {
          method: 'post',
          headers: {
            'Content-Type': 'application/graphql',
            'apikey': 'graphiql'
          },
          body: graphQLParams.query
        }).then(function (response) {
          return response.text();
        }).then(function (responseBody) {
          try {
            return JSON.parse(responseBody);
          } catch (error) {
            return responseBody;
          }
        });
      }
      var subscriptionsClient = new window.SubscriptionsTransportWs.SubscriptionClient(window.location.origin.replace('http', 'ws') + '/graphql-ws', { reconnect: true });
      var subscriptionsFetcher = window.GraphiQLSubscriptionsFetcher.graphQLFetcher(subscriptionsClient, graphQLFetcher);
      // Render <GraphiQL /> into the body.
      ReactDOM.render(
        React.createElement(GraphiQL, {
          fetcher: subscriptionsFetcher,
          query: parameters.query,
          variables: parameters.variables,
          onEditQuery: onEditQuery,
          onEditVariables: onEditVariables
        }),
        document.body
      );
    </script>
  </body>
</html>

yogthos · 2017-10-18T22:10:38Z

Would be handy to have an example for sure. Might be an idea to make an example using venia and Reagent for the client.

One option could be to add a section in the docs. Another would be to check if +reaget/+re-frame flags are present, and inject the client code for the service similarly to what you did with auth.

hlship · 2017-10-26T16:27:24Z

If you could give me a shout out when this is available, I'll update the Lacinia docs with some pointers here.

nrakochy · 2017-10-26T16:45:53Z

#324 was merged yesterday, so Lacinia is wired in with the lein template and should be in working order with graphiql when generated from the command line. That said, no example with Venia and Reagent to date.

Added Lacinia as an available feature

5d6c991

yogthos merged commit 1b3a695 into luminus-framework:master Oct 18, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added Lacinia as an available feature #322

Added Lacinia as an available feature #322

nrakochy commented Oct 17, 2017

yogthos commented Oct 18, 2017

nrakochy commented Oct 18, 2017 •

edited

Loading

yogthos commented Oct 18, 2017

hlship commented Oct 26, 2017

nrakochy commented Oct 26, 2017

Added Lacinia as an available feature #322

Added Lacinia as an available feature #322

Conversation

nrakochy commented Oct 17, 2017

yogthos commented Oct 18, 2017

nrakochy commented Oct 18, 2017 • edited Loading

yogthos commented Oct 18, 2017

hlship commented Oct 26, 2017

nrakochy commented Oct 26, 2017

nrakochy commented Oct 18, 2017 •

edited

Loading