Skip to content
This repository was archived by the owner on Mar 20, 2023. It is now read-only.

Subscriptions support #513

Closed
wants to merge 2 commits into from
Closed

Subscriptions support #513

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9bf16e4
Subscriptions support
pristavu Jun 5, 2019
16c4d39
subscriptionsEndpoint
pristavu Jun 5, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,11 @@ export type OptionsData = {|
* `__typename` field or alternatively calls the `isTypeOf` method).
*/
typeResolver?: ?GraphQLTypeResolver<any, any>,

/**
* A value to pass as subscriptions endpoint.
*/
subscriptionsEndpoint?: ?string,
|};

/**
Expand Down Expand Up @@ -202,6 +207,7 @@ function graphqlHTTP(options: Options): Middleware {
let extensionsFn;
let showGraphiQL = false;
let query;
let subscriptionsEndpoint;

let documentAST;
let variables;
Expand Down Expand Up @@ -243,6 +249,7 @@ function graphqlHTTP(options: Options): Middleware {
const typeResolver = optionsData.typeResolver;
const validationRules = optionsData.validationRules || [];
const graphiql = optionsData.graphiql;
subscriptionsEndpoint = optionsData.subscriptionsEndpoint;
context = optionsData.context || request;

// GraphQL HTTP only supports GET and POST methods.
Expand Down Expand Up @@ -385,6 +392,7 @@ function graphqlHTTP(options: Options): Middleware {
operationName,
result,
options: typeof showGraphiQL !== 'boolean' ? showGraphiQL : {},
subscriptionsEndpoint,
});
return sendResponse(response, 'text/html', payload);
}
Expand Down
22 changes: 21 additions & 1 deletion src/renderGraphiQL.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ type GraphiQLData = {|
operationName: ?string,
result?: mixed,
options: GraphiQLOptions,
subscriptionsEndpoint: ?string,
|};

export type GraphiQLOptions = {|
Expand Down Expand Up @@ -51,6 +52,10 @@ export function renderGraphiQL(data: GraphiQLData): string {
: null;
const operationName = data.operationName;
const defaultQuery = data.options.defaultQuery;
const subscriptionsEndpoint = data.subscriptionsEndpoint
? data.subscriptionsEndpoint
: 'undefined';
const subscriptionsEndpointType = typeof subscriptionsEndpoint;

return `<!--
The request to this GraphQL server provided the header "Accept: text/html"
Expand Down Expand Up @@ -83,6 +88,8 @@ add "&raw" to the end of the URL within a browser.
<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@${GRAPHIQL_VERSION}/graphiql.min.js"></script>
<script src="//unpkg.com/subscriptions-transport-ws@0.5.4/browser/client.js"></script>
<script src="//unpkg.com/graphiql-subscriptions-fetcher@0.0.2/browser/client.js"></script>
</head>
<body>
<div id="graphiql">Loading...</div>
Expand Down Expand Up @@ -137,6 +144,19 @@ add "&raw" to the end of the URL within a browser.
});
}

// GraphiQLSubscriptionsFetcher checker
function makeFetcher() {
if('${subscriptionsEndpointType}' == 'string') {
let clientClass = window.SubscriptionsTransportWs.SubscriptionClient;
let client = new clientClass('${subscriptionsEndpoint}', {
reconnect: true
});
return window.GraphiQLSubscriptionsFetcher.graphQLFetcher(client, graphQLFetcher);
}else{
return graphQLFetcher;
}
}

// When the query and variables string is edited, update the URL bar so
// that it can be easily shared.
function onEditQuery(newQuery) {
Expand All @@ -161,7 +181,7 @@ add "&raw" to the end of the URL within a browser.
// Render <GraphiQL /> into the body.
ReactDOM.render(
React.createElement(GraphiQL, {
fetcher: graphQLFetcher,
fetcher: makeFetcher,
onEditQuery: onEditQuery,
onEditVariables: onEditVariables,
onEditOperationName: onEditOperationName,
Expand Down