Comments (6)
@BuiChiTrung Published 1.0.1 📦 Can you please try it?
It should allow using Voyager as a normal React component.
from graphql-voyager.
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);
});
}
from graphql-voyager.
@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
from graphql-voyager.
@prakhathi-m I have tried this before, I doesn't work :((
from graphql-voyager.
@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>
}
from graphql-voyager.
@IvanGoncharov sorry for the late response. Version 1.0.1 works. Many thanks!
from graphql-voyager.
Related Issues (20)
- publish release notes for 1.0.1 HOT 4
- publish release notes for 1.0.1 HOT 1
- Privacy issue. HOT 2
- Add separate query/mutation/subscription switch to improve DX
- Missing tests
- Better score on lighthouse
- Using empty input object value
- Import from local file instead of cdn in middlewares HOT 1
- Uncaught TypeError: renderVoyager is not a function
- Introducing semantic release HOT 3
- Blank screen when clicking on object type.
- Update example index.html: change init to renderVoyager
- Blank screen when switching between object types, input types, queries and mutations.
- How to use a schema instead of an introspection query in index.html? HOT 2
- Middleware HTML broken in version 2.0.0
- Apollo has changes the support for middleware
- Blank screen with React error when clicking on specific nodes
- Error: Unknown error HOT 1
- Latest NPM publish does not include render-voyager-page.js fix from #357 HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from graphql-voyager.