Nginx + GraphQL Connection Refused - nginx

Question

My Client (next.js) app running at port 3000
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;
}