How to configure the base URI to support App access via GraphQL from remote machines?

Ionic Framework Ionic Angular
1

In apollo-angular one can configure the GraphQL URI via the client constructor.

const client = new ApolloClient({
  uri: 'https://api.example.com',
  cache: new InMemoryCache()
});

In Ionic the GraphQL URIs (here Query+Mutation and Subscriptions) can be configured in config.json, here a typical development setup:

{
  "graphql": "http://localhost/graphql",
  "websocket": "ws://localhost/graphql/subscriptions",
}

If I change the config to allow access from outside the local network

{
  "graphql": "http://0.0.0.0/graphql",
  "websocket": "ws://0.0.0.0/graphql/subscriptions",
}

and re-built the JS files with Ionic build I do not get any changes to the generated JS files. How do I have to configure the GraphQL URIs correctly? How do I have to build the JS files correctly?

2

The generated files are ignored from VCS and I mixed up the states. If I build the JS files there are files changed:

$ git diff
diff --git a/edge_frontend/www/main-es2015.js b/edge_frontend/www/main-es2015.js
index ad6de60..51e4666 100644
--- a/edge_frontend/www/main-es2015.js
+++ b/edge_frontend/www/main-es2015.js
@@ -30,7 +30,7 @@ webpackEmptyAsyncContext.id = "./$$_lazy_route_resource lazy recursive";
 /*! exports provided: graphql, websocket, displayErrors, default */
diff --git a/edge_frontend/www/main-es2015.js b/edge_frontend/www/main-es2015.js
index ad6de60..51e4666 100644
--- a/edge_frontend/www/main-es2015.js
+++ b/edge_frontend/www/main-es2015.js
@@ -30,7 +30,7 @@ webpackEmptyAsyncContext.id = "./$$_lazy_route_resource lazy recursive";
 /*! exports provided: graphql, websocket, displayErrors, default */
 /***/ (function(module) {
 
-module.exports = JSON.parse("{\"graphql\":\"http://localhost/graphql\",\"websocket\":\"ws://localhost/graphql/subscriptions\",\"displayErrors\":true}");
+module.exports = JSON.parse("{\"graphql\":\"http://0.0.0.0/graphql\",\"websocket\":\"ws://0.0.0.0/graphql/subscriptions\",\"displayErrors\":true}");
 
 /***/ }),
 
diff --git a/edge_frontend/www/main-es5.js b/edge_frontend/www/main-es5.js
index 035662a..75496d6 100644
--- a/edge_frontend/www/main-es5.js
+++ b/edge_frontend/www/main-es5.js
@@ -45,7 +45,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
   /***/
   function configJson(module) {
-    module.exports = JSON.parse("{\"graphql\":\"http://localhost/graphql\",\"websocket\":\"ws://localhost/graphql/subscriptions\",\"displayErrors\":true}");
+    module.exports = JSON.parse("{\"graphql\":\"http://0.0.0.0/graphql\",\"websocket\":\"ws://0.0.0.0/graphql/subscriptions\",\"displayErrors\":true}");
     /***/
   },

With this configuration I still get Network error: Http failure response for http://0.0.0.0/graphql: 0 Unknown Error.

3

Seems like the frontend code uses apollo-link-http for GraphQL Queries + Mutations and apollo-link-ws for GraphQL Subscriptions “under the ionic hood”. The queries and mutations via http work. The subscriptions via websocket don’t. Probably the reverse proxy config is not working properly yet. I configured the nginx according to the WebSocket proxying docs and How to Configure NGINX to Proxy WebSockets.

...

http {

  ...

  server {
    listen 80;
    listen [::]:80;

    ...

    location /graphql/subscriptions {
      proxy_pass http://django/graphql/subscriptions;

      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";

      proxy_redirect off;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Host $server_name;

      access_log /var/log/nginx/graphql.access.log combined;
      error_log /var/log/nginx/graphql.error.log warn;
    }
  }
}

Probably someone sees something I missed in the config :slight_smile: