request GraphIQL support subscription #1633

StringKe · 2023-09-11T06:08:27Z

StringKe
Sep 11, 2023

<!DOCTYPE html>
<html lang="en">
<head>
    <title>GraphiQL</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" />
</head>

<body>
<div id="graphiql">Loading...</div>
<script src="https://unpkg.com/graphiql/graphiql.min.js" type="application/javascript"></script>
<script>
    const params = new URLSearchParams(window.location.search);

    const path = params.get("path") || "/graphql";
    const url = `${location.protocol}//${location.host}${path}`;

    const wsPath = params.get("wsPath") || "/graphql";
    const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
    const subscriptionUrl = `${wsProtocol}//${location.host}${wsPath}`;

    const gqlFetcher = GraphiQL.createFetcher({
        url,
        subscriptionUrl,
    });

    ReactDOM.render(
        React.createElement(GraphiQL, {
            fetcher: gqlFetcher,
            defaultVariableEditorOpen: true,
            headerEditorEnabled: true,
            shouldPersistHeaders: true
        }),
        document.getElementById('graphiql'),
    );
</script>
</body>
</html>

congotej · 2023-09-14T19:19:59Z

congotej
Sep 14, 2023
Collaborator

Hi @StringKe ! I'm not sure what you're trying to achieve here. Can you please provide some context?
If this is a new feature you are interested in implementing, please open a PR per our contributing guide.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

request GraphIQL support subscription #1633

{{title}}

Replies: 1 comment

{{title}}

Select a reply

request GraphIQL support subscription #1633

StringKe Sep 11, 2023

Replies: 1 comment

congotej Sep 14, 2023 Collaborator

StringKe
Sep 11, 2023

congotej
Sep 14, 2023
Collaborator