Nginx + GraphQL Connection Refused

Question

1. My Client (next.js) app running at port 3000

2. My Server (graphql) app running at port 4000

My website is https://example.com, nginx will pass proxy port 3000.

If the user access the site, the page is loaded successfully.

But behind the scene, In my webpage some api requests are sended to graphql server. (http://localhost:4000)

This api requests are failed.

I don't know why, but when I access http://example.com:4000/graphql the graphql playground (graphiql?) loaded successfully and I can send some query and result showed well. But request from webpage is failed.

nginx/sites-enabled/example.com

server {
        listen 80;
        listen [::]:80;
        server_name www.example.com example.com;
        return 301 https://example.com$request_uri;
}


server {
    listen 80;
    listen [::]:80;
    server_name example.com;


    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

client app's graphql part

export default function createApolloClient(initialState, ctx) {
  return new ApolloClient({
    ssrMode: Boolean(ctx),
    link: authLink.concat(new HttpLink({
      uri: 'http://localhost:4000/graphql', // Server URL (must be absolute)
      credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
      fetch,
    })),
    cache: new InMemoryCache({ fragmentMatcher }).restore(initialState),
    credentials: 'include',
  })
}

** What I tried...**

I added below snippets to nginx conf (above listen [::]443 part) and restart the nginx service, but nothing changed.

   location /graphql {
        proxy_pass http://localhost:4000/graphql;
   }

I think I miss something in nginx conf. How do I fix it?

Answer 1

I resolved like below.

createApolloClient

... createApolloClient(initialState, ctx) {
  return new ApolloClient({
    ...
    link: createHttpLink({ uri: '/graphql' })

nginx

  location /graphql {
        proxy_pass http://localhost:4000/graphql;
   }