GraphiQL Integration for Webapp2 #20

mrrobby · 2016-08-31T20:50:51Z

Are there any guidelines for integrating GraphiQL here? I saw the Django integration, but it seems a bit different.

ekampf · 2016-08-31T20:58:00Z

Hey @mrrobby
So basically Graphiql is a static React website - a bunch of html, js, css resources that you need to serve from some protcted path.

Basically if you look here:
https://github.com/graphql-python/django-graphiql/tree/master/django_graphiql

You need to:

Take the files in static put them in your own folder where they're acccesible (see https://cloud.google.com/appengine/docs/python/getting-started/serving-static-files)
Take templates/index.htmland convert it to a jinja2 template, also convert the path to teh static files to whatever you configured in Feature/starwars example #1
You'll probably want to add some auth protection to the handler you write in Use ndb.Key.urlsafe() as Graph Node IDs #2 (https://cloud.google.com/appengine/docs/python/oauth/)

mrrobby · 2016-08-31T21:06:08Z

Thanks @ekampf
That makes total sense. I stepped into this project already built out and trying to add in graphQL to it. There's some static setup for admin purposes already. I'll try to integrate it there after lunch and let you know. Thanks again!

syrusakbary · 2016-08-31T21:07:07Z

As a side note, it could be possible to follow the Flask-GraphQL approach, where the /graphql endpoint also serves the GraphiQL interface when possible (this way is also the same express-graphql is using).

This approach will be the default too in the next version of django-graphiql package (that will be merged into django-graphql-view).
Also, the GraphiQL view will be using the js assets from jsdelivr.net, this way you don't need to host the static files anywhere.

https://github.com/graphql-python/flask-graphql/blob/master/flask_graphql/render_graphiql.py

ekampf · 2016-08-31T21:10:38Z

@syrusakbary sounds like I'll be bale to add a GraphiqlHandler to the library on the next branch...

svpino · 2017-12-23T20:22:20Z

It's being quite long since the last message here.

How can I serve GraphiQL today using webapp2?

ekampf · 2017-12-24T18:23:13Z

@svpino I would copy the Flask code in @syrusakbary mentioned above:
https://github.com/graphql-python/flask-graphql/blob/master/flask_graphql/render_graphiql.py

mrrobby · 2017-12-29T19:03:04Z

Hey @svpino did you get this sorted? I did this a long time ago. Let's see if the pieces I have make sense:

# app/handlers/graphiql_handler.py
from . import *
from .. import *

import graphene
from graphene import relay, resolve_only_args
from graphene_gae import NdbNode, NdbConnectionField

#Admin only class for visual interface to GraphQL querying
#  IMPORTANT - We must check security on this before production
#  Set your security in BaseHandler

class GraphiQLHandler(BaseHandler):

    def get(self):
        user = users.get_current_user()
        query = self.request.get('query')
        variables = self.request.get('variables')
        response = ''
        graphql_url = '/graphql'

        values = dict(<your_other_values>, user=user, graphql_url=graphql_url, response=response,
                      variables=variables,query=query)


        path = os.path.dirname(__file__)
        path = os.path.join(path, '../templates/admin/graphiql.html')
        self.response.out.write(render_to_string(path, values))

In the graphiql.html file, I was having trouble with the root node. Here's the part I had to edit, but it still may need slight adjustment, and this is a bit older of code

<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        overflow: hidden;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" href="/static/graphiql/graphiql.css" />
    <script src="/static/graphiql/react.min.js"></script>
    <script src="/static/graphiql/react-dom.min.js"></script>
    <script src="/static/graphiql/fetch.min.js"></script>
    <script src="/static/graphiql/graphiql.min.js"></script>
  </head>
  <body>
    <script>
.
.
.
     var fetchURL = locationQuery(otherParams);
      // Defines a GraphQL fetcher using the fetch API.
      function graphQLFetcher(graphQLParams) {
        var headers = {
          "Accept": "application/json",
          "Content-Type": "application/json"
        };

        /* mrrobby 
        Changed JSON.stringify(graphQLParams) to graphQLParams.query to remove 
        the "query": key from the front of the params
        - We should test it with a try catch block first */
        if (csrftoken)
          headers["X-CSRFToken"] = csrftoken;
        return fetch("{{ graphql_url|escapejs }}"+fetchURL, {
          method: "post",
          headers: headers,
          body: graphQLParams.query,
          credentials: "include",
        }).then(function (response) {
          return response.text();
        }).then(function (responseBody) {
          try {
            return JSON.parse(responseBody);
          } catch (error) {
            return responseBody;
          }
        });
      }
.
.
.
      ReactDOM.render(
        React.createElement(GraphiQL, {
          fetcher: graphQLFetcher,
          query: "{{ query|escapejs }}",
          variables: "{{ variables|escapejs }}",
          response: "{{ response|escapejs }}",
          onEditQuery: onEditQuery,
          onEditVariables: onEditVariables,
        }),
        document.body
      );
    </script>
  </body>
</html>

Hope it helps!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GraphiQL Integration for Webapp2 #20

GraphiQL Integration for Webapp2 #20

mrrobby commented Aug 31, 2016

ekampf commented Aug 31, 2016

mrrobby commented Aug 31, 2016

syrusakbary commented Aug 31, 2016

ekampf commented Aug 31, 2016

svpino commented Dec 23, 2017

ekampf commented Dec 24, 2017

mrrobby commented Dec 29, 2017

GraphiQL Integration for Webapp2 #20

GraphiQL Integration for Webapp2 #20

Comments

mrrobby commented Aug 31, 2016

ekampf commented Aug 31, 2016

mrrobby commented Aug 31, 2016

syrusakbary commented Aug 31, 2016

ekampf commented Aug 31, 2016

svpino commented Dec 23, 2017

ekampf commented Dec 24, 2017

mrrobby commented Dec 29, 2017