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": { "@types/graphql": {
"version": "0.9.3", "version": "0.9.3",
"resolved": "https://registry.npmjs.org/@types/graphql/-/graphql-0.9.3.tgz", "resolved": "https://registry.npmjs.org/@types/graphql/-/graphql-0.9.3.tgz",
"integrity": "sha512-+NlcRhAXQUWXnmKomiNR/5ELupOQ3N1Oz7EcUTO8P3nWDo8b2szwvaqelzE97h5N3MU27zrNLGDomJh85OlYnQ==", "integrity": "sha512-+NlcRhAXQUWXnmKomiNR/5ELupOQ3N1Oz7EcUTO8P3nWDo8b2szwvaqelzE97h5N3MU27zrNLGDomJh85OlYnQ=="
"optional": true
}, },
"@types/isomorphic-fetch": { "@types/isomorphic-fetch": {
"version": "0.0.34", "version": "0.0.34",
@ -691,6 +690,11 @@
"resolved": "https://registry.npmjs.org/babylon/-/babylon-6.17.4.tgz", "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.17.4.tgz",
"integrity": "sha512-kChlV+0SXkjE0vUn9OZ7pBMWRFd8uq3mZe8x1K6jhuNcAFAtEnjchFAqB+dYEXKyd+JpT6eppRR78QAr5gTsUw==" "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": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", "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", "resolved": "https://registry.npmjs.org/graphql-anywhere/-/graphql-anywhere-3.1.0.tgz",
"integrity": "sha1-PqDY6GRrXO5oA1AWqadVfBXCHpY=" "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": { "graphql-tag": {
"version": "2.4.2", "version": "2.4.2",
"resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.4.2.tgz", "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", "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
"integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=" "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": { "lodash.camelcase": {
"version": "4.3.0", "version": "4.3.0",
"resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz", "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", "resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-3.0.2.tgz",
"integrity": "sha1-PI+41bW/S/kK4G4U8qUwpO2TXh0=" "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": { "lodash.memoize": {
"version": "4.1.2", "version": "4.1.2",
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", "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", "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.18.2.tgz",
"integrity": "sha512-WPpJPZGUxWYHWIUMNNOYqql7zh85zGmr84FdTVWq52WTIkqlW9xSxD3QYWi/T31cqn9UNSsietVEgGn2aaSCzw==" "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": { "supports-color": {
"version": "4.1.0", "version": "4.1.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.1.0.tgz", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.1.0.tgz",
@ -5917,6 +5948,11 @@
"integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=", "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
"optional": true "optional": true
}, },
"ultron": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/ultron/-/ultron-1.1.0.tgz",
"integrity": "sha1-sHoualQagV/Go0zNRTO67DB8qGQ="
},
"uniq": { "uniq": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz", "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", "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-1.3.4.tgz",
"integrity": "sha1-+Aek8LHZ6ROuekgRLmzDrxmRtF8=" "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": { "xdg-basedir": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-2.0.0.tgz", "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-dom": "^15.6.1",
"react-router": "^4.1.1", "react-router": "^4.1.1",
"react-scripts": "1.0.10", "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": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",

View File

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

View File

@ -10,7 +10,7 @@ export default ({
return <div> Loading... </div> 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 [ const [
requiredAdventures, requiredAdventures,

View File

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

View File

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

View File

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

View File

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