GraphiQL Integration for Webapp2

Question

GraphiQL Integration for Webapp2

mrrobby opened this issue 8 years ago · comments

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

Eran Kampf · Answer 1 · Thu Sep 01 2016 04:58:00 GMT+0800 (China Standard Time)

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 #1
You'll probably want to add some auth protection to the handler you write in #2 (https://cloud.google.com/appengine/docs/python/oauth/)

Rob Deeb · Answer 2 · Thu Sep 01 2016 05:06:08 GMT+0800 (China Standard Time)

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!

Syrus Akbary · Answer 3 · Thu Sep 01 2016 05:07:07 GMT+0800 (China Standard Time)

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

Eran Kampf · Answer 4 · Thu Sep 01 2016 05:10:38 GMT+0800 (China Standard Time)

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

Santiago Valdarrama · Answer 5 · Sun Dec 24 2017 04:22:20 GMT+0800 (China Standard Time)

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

How can I serve GraphiQL today using webapp2?

Eran Kampf · Answer 6 · Mon Dec 25 2017 02:23:13 GMT+0800 (China Standard Time)

@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

Rob Deeb · Answer 7 · Sat Dec 30 2017 03:03:04 GMT+0800 (China Standard Time)

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!