Add a GraphiQL client using CDN.
- Basic GraphiQL client with SWH brand
- Temporary solution until the fully functional client is ready
Merge request reports
Activity
Jenkins job DGQL/gitlab-builds #195 succeeded .
See Console Output and Coverage Report for more details.Jenkins job DGQL/gitlab-builds #196 succeeded .
See Console Output and Coverage Report for more details.- Resolved by Jayesh
- Resolved by Jayesh
- Resolved by Jayesh
- Resolved by Jayesh
Ok for a temporary solution for first deployment to production but we should webpack this Web UI as soon as possible to serve the assets ourselves and customize color theme to the SWH one, graphiql-webpack could be a great inspiration. Also, I noticed some formatting and readability issue in the HTML file, I improved it the following way:
<!DOCTYPE html> <html lang="en"> <head> <title>SWH GraphQL explorer</title> <style> body { height: 100%; margin: 0; width: 100%; overflow: hidden; } #graphiql { height: 100vh; } </style> <script src="https://unpkg.com/react@17/umd/react.development.js" integrity="sha512-Vf2xGDzpqUOEIKO+X2rgTLWPY+65++WPwCHkX2nFMu9IcstumPsf/uKKRd5prX3wOu8Q0GBylRpsDB26R6ExOg==" crossorigin="anonymous"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" integrity="sha512-Wr9OKCTtq1anK0hq5bY3X/AvDI5EflDSAh0mE9gma+4hl+kXdTJPKZ3TwLMBcrgUeoY0s3dq9JjhCQc7vddtFg==" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"/> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="/"> <span>Software Heritage GraphQL Explorer</span> </a> </div> </nav> <div id="graphiql">Loading...</div> <script src="https://unpkg.com/graphiql/graphiql.min.js" type="application/javascript"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <script> function dedent(str) { str = str.replace(/^\n/, ""); let match = str.match(/^\s+/); return match ? str.replace(new RegExp("^"+match[0], "gm"), "") : str; } const DEFAULT_QUERY = dedent(` query getOrigins { origins(first: 2) { nodes { url } } }`); ReactDOM.render( React.createElement(GraphiQL, { fetcher: GraphiQL.createFetcher({ url: '/', }), query: DEFAULT_QUERY, defaultEditorToolsVisibility: true, }), document.getElementById('graphiql'), ); </script> </body> </html>
Thanks. This will be removed once the swh-explorer client is deployed. But I think that project can wait with this as a temporary solution.
I think it will be simpler to merge the
swh-explorer
website source code directly in theswh-graphql
repository. Our Jenkins jobs to build PyPI package already handles client assets build so it should not be complicated to add webpack processing to generate explorer HTML and related js and css assets.Ok. I expect some more complications in the swh-explorer repository. (Like adding a sample queries plugin and maybe graphiql explorer plugin as well).
If the codebase agains stays small and managable, I will merge those. For the time being I hope this single page CDN basesd solution will be good enough.
Ok. I expect some more complications in the swh-explorer repository. (Like adding a sample queries plugin and maybe graphiql explorer plugin as well).
I am not shocked having the source code of the Web UI to ease the writing of GraphQL queries integrated directly in the
swh-graphql
repository. This will simplify your development workflow and should also simplify deployment asstarlette
enables to serve static files.
Jenkins job DGQL/gitlab-builds #197 succeeded .
See Console Output and Coverage Report for more details.