apollographql / apollographql/graphql-subscriptions
subscribeToMore only with subscribe?
- Dominant language
- TypeScript
- Stars
- 1.6k
- Forks
- 129
- PR merge metrics
- No merged PRs in 30d
Description
Hi,
I followed the example for Angular with websocket https://www.apollographql.com/docs/angular/features/subscriptions/
The first trouble was with the link split because FragmentDefinitionNode does not contain "operation" property
Solved this way
```
const link = split(
// split based on operation type
({ query }) => {
const mainDefinition = getMainDefinition(query);
return mainDefinition.kind === 'OperationDefinition' && mainDefinition.operation === 'subscription';
// const { kind, operation } = getMainDefinition(query);
// return kind === 'OperationDefinition' && operation === 'subscription';
},
authLink.concat(wsLink),
authLink.concat(httpLink)
);
```
Then the subscribeToMore - updateQuery function of the apollo.watchQuery does not return anything unless valueChanges.subscribe is called as well. The example does not have it implemented this way...
```
const sQry = this.apollo.watchQuery({ query: qry, variables: vars});
sQry.valueChanges.subscribe(val => console.log('val', val));
sQry.subscribeToMore({ document: sub, variables: vars, // onError: (err) => this.subError(err),
updateQuery: (prev, {subscriptionData} ) => {
console.log('subscriptionData');
if (subscriptionData.data) {
console.log('subscriptionData.data', subscriptionData.data);
}
if (!subscriptionData.data) {
return prev;
}
}
});
```
package.json
"dependencies": {
"@angular/common": "~9.1.6",
"@angular/core": "~9.1.6",
"@angular/forms": "~9.1.6",
"@angular/platform-browser": "~9.1.6",
"@angular/platform-browser-dynamic": "~9.1.6",
"@angular/router": "~9.1.6",
"@auth0/angular-jwt": "^5.0.1",
"@capacitor/android": "^2.2.1",
"@capacitor/core": "2.2.1",
"@ionic-native/background-geolocation": "^5.27.0",
"@ionic-native/clipboard": "^5.28.0",
"@ionic-native/core": "^5.0.7",
"@ionic-native/native-audio": "^5.28.0",
"@ionic-native/open-native-settings": "^5.30.0",
"@ionic-native/power-management": "^5.30.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/sqlite": "^5.27.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic-super-tabs/angular": "^7.0.8",
"@ionic/angular": "^5.0.0",
"@ionic/lab": "^3.2.9",
"@ionic/storage": "^2.2.0",
"@mauron85/cordova-plugin-background-geolocation": "^3.1.0",
"@types/bcryptjs": "^2.4.2",
"@types/ol": "^6.3.1",
"apollo-angular": "^1.10.0",
"apollo-angular-link-http": "^1.11.0",
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.10",
"apollo-link": "^1.2.14",
"apollo-link-context": "^1.0.20",
"apollo-link-error": "^1.1.13",
"apollo-link-http": "^1.5.17",
"apollo-link-retry": "^2.2.16",
"apollo-link-ws": "^1.0.20",
"bcryptjs": "^2.4.3",
"celsius-sdk": "^0.10.13",
"chart.js": "^2.9.3",
"chartjs-plugin-zoom": "^0.7.7",
"cordova-clipboard": "^1.3.0",
"cordova-open-native-settings": "^1.5.2",
"cordova-plugin-nativeaudio": "^3.0.9",
"cordova-plugin-power-optimization": "0.0.4",
"cordova-plugin-powermanagement-orig": "^1.1.2",
"cordova-sqlite-storage": "^5.0.0",
"crypto-js": "^4.0.0",
"graphql": "^15.3.0",
"graphql-tag": "^2.10.4",
"ng2-charts": "^2.4.2",
"ngx-autosize": "^1.8.0",
"ol": "^6.3.1",
"rxjs": "~6.5.1",
"subscriptions-transport-ws": "^0.9.18",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.901.5",
"@angular/cli": "~9.1.5",
"@angular/compiler": "~9.1.6",
"@angular/compiler-cli": "~9.1.6",
"@angular/language-service": "~9.1.6",
"@capacitor/cli": "2.2.1",
"@ionic/angular-toolkit": "^2.1.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"jetifier": "^1.6.6",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~3.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"parcel-bundler": "^1.12.4",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.8.3"
},
Contributor guide
Research direction
The report centers on Apollo Angular's watchQuery, valueChanges, subscribeToMore, and updateQuery behavior in the Angular websocket subscription example. Start by reproducing it with the dependency versions listed in package.json and compare the websocket split with the documented example. Done means determining whether subscribeToMore requires an active valueChanges subscription and documenting or correcting the behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, graphql, typescript
- Domain
- api, backend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100