hiro/apollo-server
1
0
Fork 0
mirror of https://github.com/vale981/apollo-server synced 2025-03-06 10:11:40 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(subscriptions): added subscriptions for graphiql

Browse source
This commit is contained in:
Urigo 2017-03-09 15:29:58 +02:00
parent c4fabe3675
commit 68e4a35dc2
1 changed files with 20 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
packages/graphql-server-module-graphiql/src/renderGraphiQL.ts
View file

@ -20,6 +20,7 @@
export type GraphiQLData = {
endpointURL: string,
subscriptionsEndpoint: string,
query?: string,
variables?: Object,
operationName?: string,
@ -38,6 +39,7 @@ function safeSerialize(data) {
export function renderGraphiQL(data: GraphiQLData): string {
const endpointURL = data.endpointURL;
const subscriptionsEndpoint = data.subscriptionsEndpoint || '';
const queryString = data.query;
const variablesString =
data.variables ? JSON.stringify(data.variables, null, 2) : null;
@ -66,7 +68,7 @@ export function renderGraphiQL(data: GraphiQLData): string {
<script src="//cdn.jsdelivr.net/react/15.0.0/react.min.js"></script>
<script src="//cdn.jsdelivr.net/react/15.0.0/react-dom.min.js"></script>
<script src="//cdn.jsdelivr.net/graphiql/${GRAPHIQL_VERSION}/graphiql.min.js"></script>
<script src="//unpkg.com/subscriptions-transport-ws@0.5.3/browser/client.js"></script>
<script src="//unpkg.com/subscriptions-transport-ws@0.5.5/browser/client.js"></script>
</head>
<body>
<script>
@ -99,40 +101,20 @@ export function renderGraphiQL(data: GraphiQLData): string {
}
}
var subscriptionsClient;
var activeSubscriptionId = -1;
function initSubscriptions() {
var subscriptionsEndpoint = 'ws://' + window.location.hostname +
(window.location.port ? ':' + window.location.port: '') + '/subscriptions';
var fetcher;
if (window.SubscriptionsTransportWs && window.SubscriptionsTransportWs.SubscriptionClient) {
subscriptionsClient = new window.SubscriptionsTransportWs.SubscriptionClient(subscriptionsEndpoint, {
if ('${subscriptionsEndpoint}' !== '') {
var subscriptionsClient = new window.SubscriptionsTransportWs.SubscriptionClient('${subscriptionsEndpoint}', {
reconnect: true
});
subscriptionsClient.onConnect(function() {
console.log('Connected to GraphQL Subscriptions server...');
});
}
}
function graphQlSubscriptionFetcher(graphQLParams) {
return {
subscribe: function(observer) {
observer.next('Your subscription data will apear here after server publication!');
activeSubscriptionId = subscriptionsClient.subscribe({
query: graphQLParams.query,
variables: graphQLParams.variables
}, function(error, result) {
if (error) {
observer.error(error);
}
else {
observer.next(result);
}
});
}
}
fetcher = window.SubscriptionsTransportWs.graphQLFetcher(subscriptionsClient, graphQLFetcher);
} else {
fetcher = graphQLFetcher;
}
// We don't use safe-serialize for location, because it's not client input.
@ -140,13 +122,6 @@ export function renderGraphiQL(data: GraphiQLData): string {
// Defines a GraphQL fetcher using the fetch API.
function graphQLFetcher(graphQLParams) {
if (subscriptionsClient && activeSubscriptionId !== -1) {
subscriptionsClient.unsubscribe(activeSubscriptionId);
}
if (subscriptionsClient && graphQLParams.query.startsWith('subscription')) {
return graphQlSubscriptionFetcher(graphQLParams);
}
else {
return fetch('/graphql', {
method: 'post',
headers: {
@ -165,7 +140,6 @@ export function renderGraphiQL(data: GraphiQLData): string {
}
});
}
}
// When the query and variables string is edited, update the URL bar so
// that it can be easily shared.
function onEditQuery(newQuery) {
@ -186,7 +160,7 @@ export function renderGraphiQL(data: GraphiQLData): string {
// Render <GraphiQL /> into the body.
ReactDOM.render(
React.createElement(GraphiQL, {
fetcher: graphQLFetcher,
fetcher: fetcher,
onEditQuery: onEditQuery,
onEditVariables: onEditVariables,
onEditOperationName: onEditOperationName,
@ -197,8 +171,6 @@ export function renderGraphiQL(data: GraphiQLData): string {
}),
document.body
);
initSubscriptions();
</script>
</body>
</html>`;