Added subscription support and switched backend to graphcool.

This commit is contained in:
John Shaver 2017-07-14 14:21:35 -07:00
parent b2c548538a
commit 1932294e23
8 changed files with 110 additions and 66 deletions

52
package-lock.json generated
View File

@ -12,8 +12,7 @@
"@types/graphql": {
"version": "0.9.3",
"resolved": "https://registry.npmjs.org/@types/graphql/-/graphql-0.9.3.tgz",
"integrity": "sha512-+NlcRhAXQUWXnmKomiNR/5ELupOQ3N1Oz7EcUTO8P3nWDo8b2szwvaqelzE97h5N3MU27zrNLGDomJh85OlYnQ==",
"optional": true
"integrity": "sha512-+NlcRhAXQUWXnmKomiNR/5ELupOQ3N1Oz7EcUTO8P3nWDo8b2szwvaqelzE97h5N3MU27zrNLGDomJh85OlYnQ=="
},
"@types/isomorphic-fetch": {
"version": "0.0.34",
@ -691,6 +690,11 @@
"resolved": "https://registry.npmjs.org/babylon/-/babylon-6.17.4.tgz",
"integrity": "sha512-kChlV+0SXkjE0vUn9OZ7pBMWRFd8uq3mZe8x1K6jhuNcAFAtEnjchFAqB+dYEXKyd+JpT6eppRR78QAr5gTsUw=="
},
"backo2": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
"integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc="
},
"balanced-match": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@ -2664,6 +2668,11 @@
"resolved": "https://registry.npmjs.org/graphql-anywhere/-/graphql-anywhere-3.1.0.tgz",
"integrity": "sha1-PqDY6GRrXO5oA1AWqadVfBXCHpY="
},
"graphql-subscriptions": {
"version": "0.4.4",
"resolved": "https://registry.npmjs.org/graphql-subscriptions/-/graphql-subscriptions-0.4.4.tgz",
"integrity": "sha512-hqfUsZv39qmK4SEoKMnTO05U4EVvIeAD4ai5ztE9gCl4hEdeaF2Q5gvF80ONQQAnkys4odzxWYd2tBLS/cWl8g=="
},
"graphql-tag": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.4.2.tgz",
@ -3593,6 +3602,11 @@
"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
"integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
},
"lodash.assign": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
"integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc="
},
"lodash.camelcase": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@ -3623,6 +3637,11 @@
"resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-3.0.2.tgz",
"integrity": "sha1-PI+41bW/S/kK4G4U8qUwpO2TXh0="
},
"lodash.isstring": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
"integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
},
"lodash.memoize": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@ -5718,6 +5737,18 @@
"resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.18.2.tgz",
"integrity": "sha512-WPpJPZGUxWYHWIUMNNOYqql7zh85zGmr84FdTVWq52WTIkqlW9xSxD3QYWi/T31cqn9UNSsietVEgGn2aaSCzw=="
},
"subscriptions-transport-ws": {
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/subscriptions-transport-ws/-/subscriptions-transport-ws-0.8.1.tgz",
"integrity": "sha512-RRRrxZCn0Gxj8etaeliqZtjKRpE3J6PY+/rocUR8RpPe7Y3M+tG2bu1/aNe7p1DsC2fnco9QU9oH49BGrg8i7g==",
"dependencies": {
"eventemitter3": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
"integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo="
}
}
},
"supports-color": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.1.0.tgz",
@ -5917,6 +5948,11 @@
"integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
"optional": true
},
"ultron": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/ultron/-/ultron-1.1.0.tgz",
"integrity": "sha1-sHoualQagV/Go0zNRTO67DB8qGQ="
},
"uniq": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
@ -6363,6 +6399,18 @@
"resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-1.3.4.tgz",
"integrity": "sha1-+Aek8LHZ6ROuekgRLmzDrxmRtF8="
},
"ws": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/ws/-/ws-3.0.0.tgz",
"integrity": "sha1-mN2wAFbIOQy3Ued4h4hJf5kQO2w=",
"dependencies": {
"safe-buffer": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.0.1.tgz",
"integrity": "sha1-0mPKVGls2KMGtcplUekt5XkY++c="
}
}
},
"xdg-basedir": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-2.0.0.tgz",

View File

@ -9,7 +9,8 @@
"react-dom": "^15.6.1",
"react-router": "^4.1.1",
"react-scripts": "1.0.10",
"react-tap-event-plugin": "^2.0.1"
"react-tap-event-plugin": "^2.0.1",
"subscriptions-transport-ws": "^0.8.1"
},
"scripts": {
"start": "react-scripts start",

View File

@ -8,7 +8,7 @@ export default ({achievements, id, completed}) => {
return <div>Loading...</div>
}
const list = achievements.sort((a, b) => {
const list = [...achievements].sort((a, b) => {
if (a.number === b.number)
return a.letter > b.letter;
return a.number > b.number;

View File

@ -10,7 +10,7 @@ export default ({
return <div> Loading... </div>
}
const sortedAdventures = allAdventures.sort((a,b) => (a.number > b.number));
const sortedAdventures = [...allAdventures].sort((a,b) => (a.number > b.number));
const [
requiredAdventures,

View File

@ -1,20 +1,17 @@
import { gql, graphql } from 'react-apollo';
import { stripEdges } from '../utils.js';
export default graphql(gql`
query GetAchievementsForAdventure($adventureID:ID!){
getAdventure(id:$adventureID) {
achievements {
edges {
node {
id,
number,
letter,
description,
additionalText
}
}
allAchievements(filter: {
adventure: {
id: $adventureID
}
}) {
id,
number,
letter,
description,
additionalText
}
}
`,{
@ -26,8 +23,8 @@ export default graphql(gql`
};
},
props: ({ownProps, data}) => {
return data.getAdventure ? {
achievements: stripEdges(data.getAdventure.achievements),
return data.allAchievements ? {
achievements: data.allAchievements,
...ownProps
} : {...ownProps}

View File

@ -1,26 +1,18 @@
import { gql, graphql } from 'react-apollo';
import { stripEdges } from '../utils.js';
export default graphql(gql`
query GetAllAdventuresForRank{
viewer {
allAdventures {
edges {
node {
name,
number,
required,
id
}
}
}
query GetAllAdventures{
allAdventures {
name,
number,
required,
id
}
}
`,{
props: ({ownProps, data}) => (
data.viewer ? {
allAdventures: stripEdges(data.viewer.allAdventures),
data.allAdventures ? {
allAdventures: data.allAdventures,
...ownProps
} : {...ownProps})
});

View File

@ -1,36 +1,31 @@
import { gql, graphql } from 'react-apollo';
export default graphql(gql`
query GetScoutData($scoutID:ID!){
getScout(id: $scoutID){
displayName,
advancementDeadline,
adventures {
edges {
node {
name
}
}
},
achievements {
edges {
node {
number,
letter
}
}
query getScoutData($scoutID:ID!){
Scout(id: $scoutID) {
displayName
advancementDeadline
completedAdventures {
id
name
}
completedAchievements {
id
number
letter
}
}
}
`,{
options : ({scoutID}) => ({variables: {scoutID}}),
props: ({ ownProps, data }) => (
data.getScout ? {
data.Scout ? {
scoutID: ownProps.scoutID,
displayName: data.getScout.displayName,
completedAdventures: data.getScout.adventures,
completedAchievements: data.getScout.achievements,
advancementDeadline: data.getScout.advancementDeadline
displayName: data.Scout.displayName,
advancementDeadline: data.Scout.advancementDeadline,
completedAdventures: data.Scout.completedAdventures,
completedAchievements: data.Scout.completedAchievements
} : {
scoutID: ownProps.scoutID
}

View File

@ -1,12 +1,19 @@
import React from 'react';
import ReactDOM from 'react-dom';
import {
ApolloClient,
createNetworkInterface,
ApolloProvider
} from 'react-apollo';
import {
SubscriptionClient,
addGraphQLSubscriptions
} from 'subscriptions-transport-ws';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
//import registerServiceWorker from './registerServiceWorker';
import './index.css';
import App from './App';
@ -15,23 +22,27 @@ import App from './App';
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();
const client = new ApolloClient({
networkInterface: createNetworkInterface({
uri: 'https://us-west-2.api.scaphold.io/graphql/scout'
})
const httpInterface = createNetworkInterface({
uri: "https://api.graph.cool/simple/v1/cj53el7vnpphz01759pf8l7ou"
});
const loc = window.location;
const wsClient = new SubscriptionClient("wss://subscriptions.us-west-2.graph.cool/v1/cj53el7vnpphz01759pf8l7ou", {
reconnect: true
});
console.log("location: ", loc);
const networkInterface = addGraphQLSubscriptions(httpInterface, wsClient);
const client = new ApolloClient({ networkInterface });
const location = window.location;
ReactDOM.render(
<MuiThemeProvider>
<ApolloProvider client={client}>
<App slug={loc.pathname} query={loc.search} />
<App slug={location.pathname} query={location.search} />
</ApolloProvider>
</MuiThemeProvider>,
document.getElementById('root')
);
//registerServiceWorker();
//registerServiceWorker(); //See import above