Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

GraphiQL: Allow full websocket mode #491

Merged
merged 3 commits into from
Aug 1, 2017
Merged

GraphiQL: Allow full websocket mode #491

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fa76131
chore(graphiql): update package and allow full websocket mode
DxCx Jul 31, 2017
8aed17c
chore(package): update CHANGELOG.md
DxCx Jul 31, 2017
6e30e35
fix(graphiql): do not pass undefined parameters
DxCx Jul 31, 2017
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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
### VNEXT

* Add support for GraphiQL editor themes in [#484](https://github.com/apollographql/apollo-server/pull/484) as requested in [#444](https://github.com/apollographql/apollo-server/issues/444)
* Add support for full websocket using GraphiQL [#491](https://github.com/apollographql/graphql-server/pull/491)

### v1.0.3

Expand Down
109 changes: 66 additions & 43 deletions packages/apollo-server-module-graphiql/src/renderGraphiQL.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export type GraphiQLData = {

// Current latest version of GraphiQL.
const GRAPHIQL_VERSION = '0.11.2';
const SUBSCRIPTIONS_TRANSPORT_VERSION = '0.7.0';
const SUBSCRIPTIONS_TRANSPORT_VERSION = '0.8.2';

// Ensures string values are safe to be used within a <script> tag.
// TODO: I don't think that's the right escape function
Expand All @@ -41,8 +41,12 @@ function safeSerialize(data) {

export function renderGraphiQL(data: GraphiQLData): string {
const endpointURL = data.endpointURL;
const endpointWs = endpointURL.startsWith('ws://');
const subscriptionsEndpoint = data.subscriptionsEndpoint;
const usingSubscriptions = !!subscriptionsEndpoint;
const usingHttp = !endpointWs;
const usingWs = endpointWs || !!subscriptionsEndpoint;
const endpointURLWs = usingWs && (endpointWs ? endpointURL : subscriptionsEndpoint);

const queryString = data.query;
const variablesString =
data.variables ? JSON.stringify(data.variables, null, 2) : null;
Expand All @@ -68,18 +72,23 @@ export function renderGraphiQL(data: GraphiQLData): string {
width: 100%;
}
</style>
<link href="//cdn.jsdelivr.net/npm/graphiql@${GRAPHIQL_VERSION}/graphiql.css" rel="stylesheet" />
<script src="//cdn.jsdelivr.net/fetch/0.9.0/fetch.min.js"></script>
<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/npm/graphiql@${GRAPHIQL_VERSION}/graphiql.min.js"></script>
<link href="//unpkg.com/graphiql@${GRAPHIQL_VERSION}/graphiql.css" rel="stylesheet" />
<script src="//unpkg.com/react@15.6.1/dist/react.min.js"></script>
<script src="//unpkg.com/react-dom@15.6.1/dist/react-dom.min.js"></script>
<script src="//unpkg.com/graphiql@${GRAPHIQL_VERSION}/graphiql.min.js"></script>
${usingEditorTheme ?
`<link href="//cdn.jsdelivr.net/npm/codemirror@5/theme/${editorTheme}.min.css" rel="stylesheet" />`
: ''}
${usingSubscriptions ?
`<script src="//unpkg.com/subscriptions-transport-ws@${SUBSCRIPTIONS_TRANSPORT_VERSION}/browser/client.js"></script>` +
${usingHttp ?
`<script src="//cdn.jsdelivr.net/fetch/2.0.1/fetch.min.js"></script>`
: ''}
${usingWs ?
`<script src="//unpkg.com/subscriptions-transport-ws@${SUBSCRIPTIONS_TRANSPORT_VERSION}/browser/client.js"></script>`
: ''}
${usingWs && usingHttp ?
'<script src="//unpkg.com/graphiql-subscriptions-fetcher@0.0.2/browser/client.js"></script>'
: ''}

</head>
<body>
<script>
Expand Down Expand Up @@ -112,41 +121,48 @@ export function renderGraphiQL(data: GraphiQLData): string {
}
}

var fetcher;
${usingWs ? `
var subscriptionsClient = new window.SubscriptionsTransportWs.SubscriptionClient('${endpointURLWs}', {
reconnect: true
});

if (${usingSubscriptions}) {
var subscriptionsClient = new window.SubscriptionsTransportWs.SubscriptionClient('${subscriptionsEndpoint}', {
reconnect: true
});
fetcher = window.GraphiQLSubscriptionsFetcher.graphQLFetcher(subscriptionsClient, graphQLFetcher);
} else {
fetcher = graphQLFetcher;
}
var graphQLWSFetcher = subscriptionsClient.request.bind(subscriptionsClient);
` : ''}

${usingHttp ? `
// We don't use safe-serialize for location, because it's not client input.
var fetchURL = locationQuery(otherParams, '${endpointURL}');

// Defines a GraphQL fetcher using the fetch API.
function graphQLHttpFetcher(graphQLParams) {
return fetch(fetchURL, {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
${passHeader}
},
body: JSON.stringify(graphQLParams),
credentials: 'include',
}).then(function (response) {
return response.text();
}).then(function (responseBody) {
try {
return JSON.parse(responseBody);
} catch (error) {
return responseBody;
}
});
}
` : ''}

${usingWs && usingHttp ? `
var fetcher =
window.GraphiQLSubscriptionsFetcher.graphQLFetcher(subscriptionsClient, graphQLHttpFetcher);
` : `
var fetcher = ${usingWs ? 'graphQLWSFetcher' : 'graphQLHttpFetcher' };
`}

// We don't use safe-serialize for location, because it's not client input.
var fetchURL = locationQuery(otherParams, '${endpointURL}');

// Defines a GraphQL fetcher using the fetch API.
function graphQLFetcher(graphQLParams) {
return fetch(fetchURL, {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
${passHeader}
},
body: JSON.stringify(graphQLParams),
credentials: 'include',
}).then(function (response) {
return response.text();
}).then(function (responseBody) {
try {
return JSON.parse(responseBody);
} catch (error) {
return responseBody;
}
});
}
// When the query and variables string is edited, update the URL bar so
// that it can be easily shared.
function onEditQuery(newQuery) {
Expand All @@ -162,7 +178,14 @@ export function renderGraphiQL(data: GraphiQLData): string {
updateURL();
}
function updateURL() {
history.replaceState(null, null, locationQuery(parameters) + window.location.hash);
var cleanParams = Object.keys(parameters).filter(function(v) {
return parameters[v] !== undefined;
}).reduce(function(old, v) {
old[v] = parameters[v];
return old;
}, {});

history.replaceState(null, null, locationQuery(cleanParams) + window.location.hash);
}
// Render <GraphiQL /> into the body.
ReactDOM.render(
Expand Down