polen
Version:
A framework for delightful GraphQL developer portals
27 lines • 1.23 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { useGraphQLSchema } from '../schema-context.js';
import { GraphQLDocument } from './GraphQLDocument.js';
/**
* GraphQL Document component that uses the schema context
*/
export const GraphQLDocumentWithSchema = (props) => {
const schema = useGraphQLSchema();
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
// Always render the same structure to avoid hydration issues
const isInteractive = mounted && schema;
if (!isInteractive) {
// Static fallback
return (_jsx("div", { className: 'graphql-document graphql-document-static', "data-testid": 'graphql-document', children: _jsx("pre", { style: {
backgroundColor: `var(--gray-a2)`,
color: `var(--gray-12)`,
padding: `var(--space-3)`,
borderRadius: `var(--radius-3)`,
}, children: _jsx("code", { className: "language-graphql", children: props.children }) }) }));
}
return (_jsx(GraphQLDocument, { ...props, schema: schema }));
};
//# sourceMappingURL=GraphQLDocumentWithSchema.js.map