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!

Uh oh!

GraphiQL Integration for Webapp2 #20

Description

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions