apollographql / apollographql/graphql-subscriptions

subscribeToMore only with subscribe?

Open
#239 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.