Skip to content
Snippets Groups Projects

Add a GraphiQL client using CDN.

Merged Jayesh requested to merge client-UI into master
1 unresolved thread
  • Basic GraphiQL client with SWH brand
  • Temporary solution until the fully functional client is ready

Merge request reports

Loading
Loading

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
  • Antoine Lambert
  • Antoine Lambert
  • Antoine Lambert
    • 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>
    • Author Contributor

      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 the swh-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.

    • Author Contributor

      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 as starlette enables to serve static files.

    • 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.

      Sure but serving the assets ourselves is better as we do not depend on a third party.

    • Author Contributor

      True, and unpkg is not that trustable. We will move away from this solution sometime soon.

      I want to concentrate on cache and REST APIs now and the fancy client can wait for a while:)

    • Please register or sign in to reply
  • Jayesh added 1 commit

    added 1 commit

    • 142d99e0 - Add a GraphiQL client using CDN.

    Compare with previous version

  • Jenkins job DGQL/gitlab-builds #197 succeeded .
    See Console Output and Coverage Report for more details.

  • Jayesh resolved all threads

    resolved all threads

  • Antoine Lambert approved this merge request

    approved this merge request

  • merged

  • Please register or sign in to reply
    Loading