The schema diagram keep "transmitting" when using graphql-voyager as a React component

[BuiChiTrung]

The vanilla JS example with graphql voyager works fine but when I try to load a graphql schema (run locally) to graphql-voyager as a React component:

const ServiceVisualize: React.FC = () => {
    function introspectionProvider(introspectionQuery: any) {
        return fetch('http://localhost:8000/country/graphql', {
            method: 'post',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ query: introspectionQuery }),
            credentials: 'include',
        })
            .then(function (response) {
                return response.text();
            })
            .then(function (responseBody) {
                try {
                    return JSON.parse(responseBody);

                } catch (error) {
                    return responseBody;
                }
            });
    }

    return <Voyager introspection={introspectionProvider} />
}

The result: (the diagram spot keep hanging, this seem like it is caused by the "Unexpected token >" err)

More info:

• My project
• The component
• The introspection response

Any help, please?

[prakhathi-m]

You are getting an error because you are not passing the JSON object. you could return the parsed JSON like this:

function introspectionProvider(query) {
  return fetch(window.location.origin + '/graphql', {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ query: query }),
  })
  .then((response) => response.json())      
  .catch((err) => {
        console.log(err);
     });
}

[IvanGoncharov]

@BuiChiTrung Can you try it on 1.0.0-rc.31?
If it fixed your issue then you have the same exact issue as #259

[BuiChiTrung]

@prakhathi-m I have tried this before, I doesn't work :((

[BuiChiTrung]

@IvanGoncharov This version doesn't work, too. It doesn't ask me to install @emotion and viz.js module manually, but the same error is raised: "Unexpected token '<'" and the diagram keeps saying "Transmitting".

For now, the following approach work for me:

• Add the script in the index.html file at the root of my React repo:

<script src="https://cdn.jsdelivr.net/npm/react@16/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@16/umd/react-dom.production.min.js"></script>

• React component:

const ServiceVisualize: React.FC = () => {
    let {name} = useParams()

    useEffect(() => {
        const script = document.createElement('script');

        script.async = true;
        script.text = "function introspectionProvider(introspectionQuery) {\n" +
            "        // This example expects a GraphQL server at the path /graphql.\n" +
            "        // Change this to point wherever you host your GraphQL server.\n" +
            `        return fetch('http://localhost:8000/${name}/graphql', {\n` +
            "            method: 'post',\n" +
            "            headers: {\n" +
            "                Accept: 'application/json',\n" +
            "                'Content-Type': 'application/json',\n" +
            "            },\n" +
            "            body: JSON.stringify({ query: introspectionQuery }),\n" +
            "            credentials: 'include',\n" +
            "        })\n" +
            "            .then(function (response) {\n" +
            "                return response.text();\n" +
            "            })\n" +
            "            .then(function (responseBody) {\n" +
            "                try {\n" +
            "                    return JSON.parse(responseBody);\n" +
            "                } catch (error) {\n" +
            "                    return responseBody;\n" +
            "                }\n" +
            "            });\n" +
            "    }\n"+
            " GraphQLVoyager.init(document.getElementById('voyager'), {\n" +
            "        introspection: introspectionProvider,\n" +
            "    });"

        document.body.appendChild(script);

        return () => {
            document.body.removeChild(script);
        }
    }, [name]);


    return <div id="voyager" style={{"height": "100vh"}}></div>
}

[IvanGoncharov]

@BuiChiTrung Published 1.0.1 📦 Can you please try it?
It should allow using Voyager as a normal React component.

[BuiChiTrung]

@IvanGoncharov sorry for the late response. Version 1.0.1 works. Many thanks!