Extremely poor Apollo GraphQL support in Nativescript


#1

Hi,
I work with a group of Freelancers and we currently have a very big customer who would like to create a mobile version of their application. We’re evaluating different options, including:

  1. Angular with Nativescript
  2. Angular with the React Native Renderer
  3. React with React Native

We usually develop native applications using React Native, but this particular customer prefers Angular and we already developed a web application using Angular + Apollo GraphQL for them, so it makes sense to keep using Angular on the mobile as well.

I already did some early tests trying to integrate Apollo with Nativescript, but so far it wasn’t a smooth experience:

  1. gql tagged template literals don’t work: https://github.com/NativeScript/nativescript-angular/issues/1284
  2. Apollo GraphQL Subscriptions dont’ work: https://github.com/NativeScript/nativescript-angular/issues/1285
  3. Fragments don’t work as well: NativeScript/nativescript-angular/issues/1285#issuecomment-382028347

We didn’t get any of the previous mentioned issues with React Native, so I’m wondering if someone ever used GraphQL in a serious project with Nativescript.

We’re thinking about moving to React or resurrecting the React Native Renderer, but the maintenance burden doesn’t delight us.

I would like to know if someone had success with Nativescript + Apollo GraphQL and has some hints to share with us. It would be also very cool to get some help from the upstream in order to get everything working with Apollo GraphQL.

Thanks


#2

Regarding your first issue, ReferenceError: __makeTemplateObject, it could be the issue with the helper function definition. This blog defines how you may use asyc/await helpers in NativeScript, you may have to follow the similar procedure for tagged template, make the __makeTemplateObject reference available globally.

Your second issue was already answered in Github, you will have to implement WebSocketLink which will not be available in NativeScript engine by default.

I’m not sure what you mean by Fragment here, there are different meanings for it based on your context, so please be more detail.

Besides, I would highly suggest to write a plugin for native libraries exposed by Apollo for best mobile experience.


#3

Thanks, I managed to fix the issue with the tagged template literals and the GraphQL fragments and I’m looking at the WebSocket right now, I’ll keep posting updates.


#4

I created a custom wrapper for WebSocketLink and I managed to get Apollo GraphQL Subscriptions working backed by nativescript-websockets.
The code is a mess right now, but once I’ll manage to clean it up I’ll publish it, along with a guide to use Apollo GraphQL with Nativescript and Angular.


#5

Hey @darkbasic, have you had a chance to write this up or publish a demo repo somewhere? We’re about to embark on something similar (though with Nativescript-vue) and possibly go one step wackier by using AWS AppSync as our GraphQL provider (it’s built on Apollo). I’d definitely prefer to stand on the shoulders of giants instead of reinventing the wheel on this one, if you don’t mind?


#6

@John.landgrave I’m in the same situation now, attempting to get AWS AppSync working with {N}. Did you make any headway in that regard? Currently importing aws-appsync throws an error when importing an apollo library (even using nativescript-nodeify).


#7

Hi guys, I’m sorry for the late answer but I’ve missed the first notification.
Yes, I managed to get it working, but since the customer opted out for another framework the patch didn’t get submitted upstream because it was still a bit too hacky.

If I recall correctly the easiest way to get it working was to comment out the following line in subscriptions-transport-ws:

diff --git a/src/index.ts b/src/index.ts
index 43341cf..a926871 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,4 @@
 export * from './client';
-export * from './server';
+//export * from './server';
 export * from './message-types';
 export * from './protocol';

I had a better patch but it wasn’t finished and I can’t find it anymore, I’m sorry.


#8

@darkbasic that’s interesting and I’ll have to try that out when I have more time (like that happens, right?)

@fchack93 I ultimately made the call that subscriptions weren’t vital to the client’s app, so I forwent them in favor of just directly POSTing to AWS with the X-Api-Key header which is allowing me to do queries/mutations without the use of graphql-tag or Apollo (at all). There was a little bit of a learning curve as far as the object structure, but you basically just need the post body to be like this:
{ query: 'gql query as a string', variables: { var1: MyVar1, ...}}


#9

@John.landgrave So you didn’t end up using the aws-appsync library at all? I guess you’re just automatically re-fetching the data at intervals to avoid using the subscriptions? My specific issue is here if you’re curious


#10

Correct, I didn’t use the aws-appsync library at all. My application didn’t really have need of real-time data in the form of subscriptions, it was sufficient to just re-fetch data when navigating between views.