Adds a temporary static build preview of Lab for faster iterations#7901
Adds a temporary static build preview of Lab for faster iterations#7901kamilkisiela wants to merge 2 commits intofeat/lab-query-planfrom
Conversation
Steps: 1. Open the file with `?endpoint=http://localhost:4000/graphql` 2. Write config file: ```yaml supergraph: source: file path: bench/supergraph.graphql log: level: info query_planner: allow_expose: true cors: enabled: true allow_any_origin: true policies: [] ``` 3. `cargo run` 4. Execute queries with header `"hive-expose-query-plan": "true"`
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request introduces a new capability to generate a static HTML preview of the Lab application. This allows developers to quickly test and iterate on changes without needing a full development server, streamlining the feedback loop and improving the overall development experience for the Lab. Highlights
Ignored Files
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new script to generate a static HTML preview of the Laboratory, which streamlines the iteration process. The changes include adding a build:static-preview script to package.json and a new Node.js script build-static-preview.mjs that bundles the application and its dependencies into a single HTML file for easy local testing. The overall approach is sound for creating a self-contained preview.
|
|
||
| const resolveDistPath = relativePath => path.resolve(distDirectory, relativePath); | ||
|
|
||
| const readRequiredText = relativePath => fs.readFile(resolveDistPath(relativePath), 'utf8'); |
There was a problem hiding this comment.
The readRequiredText function is designed to fetch essential files for the static preview. However, it currently lacks error handling. If any of these files are missing from the dist directory, the script will fail abruptly without a clear message indicating which file caused the issue. Implementing a try-catch block would make the script more resilient and provide better diagnostic information in case of missing build artifacts.
const readRequiredText = async relativePath => {
try {
return await fs.readFile(resolveDistPath(relativePath), 'utf8');
} catch (error) {
console.error(`Error reading required file ${relativePath}:`, error);
process.exit(1); // Exit with an error code
}
};| document.head.appendChild(style); | ||
| } | ||
|
|
||
| new Function(payload.bundleSource)(); |
There was a problem hiding this comment.
Using new Function(payload.bundleSource)() to execute the main JavaScript bundle, while functional, can introduce minor performance overhead and make debugging more challenging compared to directly embedding the script content within a <script> tag. For a static HTML file, directly inserting the bundle content is often a more straightforward and equally secure approach, assuming the bundleSource is trusted (which it is, coming from a local build).
const script = document.createElement('script');
script.textContent = payload.bundleSource;
document.body.appendChild(script);
🚀 Snapshot Release (
|
| Package | Version | Info |
|---|---|---|
@graphql-hive/laboratory |
0.1.3-alpha-20260324124939-827754305917eb46d126da83453decc181fef271 |
npm ↗︎ unpkg ↗︎ |
@graphql-hive/render-laboratory |
0.1.3-alpha-20260324124939-827754305917eb46d126da83453decc181fef271 |
npm ↗︎ unpkg ↗︎ |
hive |
11.0.0-alpha-20260324124939-827754305917eb46d126da83453decc181fef271 |
npm ↗︎ unpkg ↗︎ |
|
🐋 This PR was built and pushed to the following Docker images: Targets: Platforms: Image Tag: |
mskorokhodov
force-pushed
the
feat/lab-query-plan
branch
4 times, most recently
from
cde3cb8 to
7f23520
Compare
2 participants
Steps:
Open the file with
?endpoint=http://localhost:4000/graphqlor with
?endpoint=https://mock-qp-response.theguild.workers.dev- it has mocked responseWrite config file:
cargo runExecute queries with header
"hive-expose-query-plan": "true"