feat: Update the GraphQL page #753

athul · 2019-12-15T05:37:47Z

Update the GraphQL page from GraphiQL to GraphQL Playground by Prisma Labs.
It provides a better and Interactive UI for testing and checking Endpoints. Demo

I could make a PR for the same by Changing the contents of the GRAPHIQL variable here

starlette/starlette/graphql.py

Lines 147 to 279 in c5239ba

    
           GRAPHIQL = """ 
        
           <!-- 
        
            *  Copyright (c) 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> 
        
                 body { 
        
                   height: 100%; 
        
                   margin: 0; 
        
                   width: 100%; 
        
                   overflow: hidden; 
        
                 } 
        
                 #graphiql { 
        
                   height: 100vh; 
        
                 } 
        
               </style> 
        
               <!-- 
        
                 This GraphiQL example depends on Promise and fetch, which are available in 
        
                 modern browsers, but can be "polyfilled" for older browsers. 
        
                 GraphiQL itself depends on React DOM. 
        
                 If you do not want to rely on a CDN, you can host these files locally or 
        
                 include them directly in your favored resource bunder. 
        
               --> 
        
               <link href="//cdn.jsdelivr.net/npm/graphiql@0.12.0/graphiql.css" rel="stylesheet"/> 
        
               <script src="//cdn.jsdelivr.net/npm/whatwg-fetch@2.0.3/fetch.min.js"></script> 
        
               <script src="//cdn.jsdelivr.net/npm/react@16.2.0/umd/react.production.min.js"></script> 
        
               <script src="//cdn.jsdelivr.net/npm/react-dom@16.2.0/umd/react-dom.production.min.js"></script> 
        
               <script src="//cdn.jsdelivr.net/npm/graphiql@0.12.0/graphiql.min.js"></script> 
        
             </head> 
        
             <body> 
        
               <div id="graphiql">Loading...</div> 
        
               <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 onEditOperationName(newOperationName) { 
        
                   parameters.operationName = newOperationName; 
        
                   updateURL(); 
        
                 } 
        
                 function updateURL() { 
        
                   var newSearch = '?' + Object.keys(parameters).filter(function (key) { 
        
                     return Boolean(parameters[key]); 
        
                   }).map(function (key) { 
        
                     return encodeURIComponent(key) + '=' + 
        
                       encodeURIComponent(parameters[key]); 
        
                   }).join('&'); 
        
                   history.replaceState(null, null, newSearch); 
        
                 } 
        
                 // Defines a GraphQL fetcher using the fetch API. You're not required to 
        
                 // use fetch, and could instead implement graphQLFetcher however you like, 
        
                 // as long as it returns a Promise or Observable. 
        
                 function graphQLFetcher(graphQLParams) { 
        
                   // This example expects a GraphQL server at the path /graphql. 
        
                   // Change this to point wherever you host your GraphQL server. 
        
                   return fetch({{REQUEST_PATH}}, { 
        
                     method: 'post', 
        
                     headers: { 
        
                       'Accept': 'application/json', 
        
                       'Content-Type': 'application/json', 
        
                     }, 
        
                     body: JSON.stringify(graphQLParams), 
        
                     credentials: 'include', 
        
                   }).then(function (response) { 
        
                     return response.text(); 
        
                   }).then(function (responseBody) { 
        
                     try { 
        
                       return JSON.parse(responseBody); 
        
                     } catch (error) { 
        
                       return responseBody; 
        
                     } 
        
                   }); 
        
                 } 
        
                 // Render <GraphiQL /> into the body. 
        
                 // See the README in the top level of this module to learn more about 
        
                 // how you can customize GraphiQL by providing different values or 
        
                 // additional child elements. 
        
                 ReactDOM.render( 
        
                   React.createElement(GraphiQL, { 
        
                     fetcher: graphQLFetcher, 
        
                     query: parameters.query, 
        
                     variables: parameters.variables, 
        
                     operationName: parameters.operationName, 
        
                     onEditQuery: onEditQuery, 
        
                     onEditVariables: onEditVariables, 
        
                     onEditOperationName: onEditOperationName 
        
                   }), 
        
                   document.getElementById('graphiql') 
        
                 ); 
        
               </script> 
        
             </body> 
        
           </html> 
        
           """

I'll start working on this if this gets a green flag 😅 😅

The text was updated successfully, but these errors were encountered:

tomchristie · 2019-12-17T10:29:39Z

That looks pretty decent yup.

I'm not sure I really want us to take pull requests in this area or not, since what I'd really like to see at this point is having the GraphQL app move out into a third party package as per #619

athul · 2019-12-17T11:00:03Z

I haven't had any expereience with making python packages... But I'd totally love to work on the above mentioned. Do you have any suggestions or workarounds for the same?
Should I reuse the code in graphql.py file for developing the package.

Plus updating the package might cause some disinterest who use FastAPI framework for GraphQL in production.

tomchristie · 2019-12-17T11:21:31Z

I think I probably just need to leave this one in other folk's hands.

I'd be totally happy with someone starting up a project based on the existing graphql.py and associated tests & docs. If someone happens to take a propactive lead on that, then we can consider deprecating the built-in option, and instead start linking out to third parties instead.

athul · 2019-12-17T11:24:35Z

Obviously Understandable.

athul · 2019-12-18T12:41:01Z

Hey @tomchristie I actually Tried it by playing a bit with Source code and it actually worked and really well too....

import graphene
from fastapi import FastAPI
from starlette.graphql import GraphQLApp


class Query(graphene.ObjectType):
    hello = graphene.String(name=graphene.String(default_value="stranger"))

    def resolve_hello(self, info, name):
        return "Hello " + name

#
app = FastAPI()
app.add_route("/", GraphQLApp(schema=graphene.Schema(query=Query)))

This is the source code for it

JayH5 · 2021-02-05T19:47:04Z

Thank you for filing this issue. We have decided to deprecate GraphQL support within Starlette itself so I am going to close this issue. See #619.

lioman mentioned this issue May 26, 2020

[Feature] Allow overriding of qraphiql html #953

Closed

JayH5 added the graphql label Sep 11, 2020

JayH5 closed this as completed Feb 5, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Update the GraphQL page #753

feat: Update the GraphQL page #753

athul commented Dec 15, 2019 •

edited

tomchristie commented Dec 17, 2019

athul commented Dec 17, 2019

tomchristie commented Dec 17, 2019

athul commented Dec 17, 2019

athul commented Dec 18, 2019

JayH5 commented Feb 5, 2021

feat: Update the GraphQL page #753

feat: Update the GraphQL page #753

Comments

athul commented Dec 15, 2019 • edited

tomchristie commented Dec 17, 2019

athul commented Dec 17, 2019

tomchristie commented Dec 17, 2019

athul commented Dec 17, 2019

athul commented Dec 18, 2019

JayH5 commented Feb 5, 2021

athul commented Dec 15, 2019 •

edited