I am coding a only front end site using Django. to query data to a DataBase I use AJAX to my Django and Django requests a third party GraphQL. so far all works perfect. But now I need to alert the users on updates to a table. the third party has setup subscriptions. I know is working because I made a view with the play ground, execute the subscription and on updates, the playground shows the update.
So how can I implemente those subscriptions to my site so on updates I can do console.log(subscriptionUpdateMsg) ?
I have been looking for about 3 days and I have found many docs whith info, but they require node.js or other servers, the problem is that I already have all on Django server as I was required. and some other sites works with but I get error failed: Error during WebSocket handshake: Unexpected response code: 500
This is what the code creates, and is working: screenshot here
Here is the working code with the playgroun in my site:
<html>
<head>
<style>
html,
body {
height: 100%;
margin: 0;
overflow: hidden;
width: 100%;
}
</style>
<link
href="//cdn.jsdelivr.net/npm/graphiql@0.11.11/graphiql.css"
rel="stylesheet"
/>
<script src="//cdn.jsdelivr.net/react/15.4.2/react.min.js"></script>
<script src="//cdn.jsdelivr.net/react/15.4.2/react-dom.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/graphiql@0.11.11/graphiql.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/graphql-transport-ws@0.8.3/browser/client.js"></script>
</head>
<body>
<script>
// Setup subscription client.
const GRAPHQL_ENDPOINT =
(location.protocol === "https" ? "wss" : "ws") +
"://" +
//location.host +
"apiclients.develop.ThirdPartyWebSite.com:8009/graphql/"
let subClient = new window.SubscriptionsTransportWs.SubscriptionClient(
GRAPHQL_ENDPOINT,
{reconnect: true},
)
subFetcher = subClient.request.bind(subClient)
// Render <GraphiQL /> into the body.
ReactDOM.render(
React.createElement(GraphiQL, {
fetcher: subFetcher, //graphQLFetcher
}),
document.body,
)
</script>
</body>
</html>
Since I could not find any tutorials or full examples I made hours of test on the browser console and now I see that is easy:
1: add the javascript src="//cdn.jsdelivr.net/npm/graphql-transport-ws@0.8.3/browser/client.js
2: with only this javascript we are ready to subscribe
const GRAPHQL_ENDPOINT =
(location.protocol === "https" ? "wss" : "ws") +
"://apiclients.develop.ThirdPartyWebSite.com:8009/graphql/"
let subClient = new window.SubscriptionsTransportWs.SubscriptionClient(
GRAPHQL_ENDPOINT,
{reconnect: true},
)
with the next line:
subClient.subscribe({query:'subscription{onNewReservation(group:"clients"){reservationId}}'}, function(error,data){console.log(data); })
☺