graphql-kit / graphql-voyager

🛰️ Represent any GraphQL API as an interactive graph
https://graphql-kit.com/graphql-voyager/
MIT License
7.69k stars 504 forks source link

fix: using await in the html file for the hapi middleware #381

Closed Rowadz closed 4 months ago

Rowadz commented 5 months ago

Hello, thank you for this project it's impressive :)

Tried to use it out of curiosity and I noticed an issue with the HTML file that gets generated from src/middleware/render-voyager-page.ts.

The issue is that it's using await which breaks the browser:

Screenshot 2024-01-08 at 20 58 45 Screenshot 2024-01-08 at 20 58 56

We shouldn't be using await, so I changed the file to include this:

window.addEventListener('load', async function (event) {
  fetch('${endpointUrl}', {
    method: 'post',
    headers: Object.assign(
      {},
      {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      `${headersJS}`
    ),
    body: JSON.stringify({
      query: GraphQLVoyager.voyagerIntrospectionQuery,
    }),
    credentials: 'include',
  })
    .then((response) => response.json())
    .then((introspection) => {
      GraphQLVoyager.renderVoyager(document.getElementById('voyager'), {
        introspection,
        displayOptions: `${JSON.stringify(displayOptions)}`,
      })
    })
})

I tested this locally with Hapi, following this

Thanks!

Rowadz commented 5 months ago

Something that might be interesting is that when running npm run compile:middleware, the complied middleware doesn't match what's being installed in version 2.0.0, only one await is being used.

LongLiveCHIEF commented 5 months ago

related #372 and #375