CODEWITHSUNDEEP
nginxgraphqlapollo-clientnext.js
Shaun Chua
Shaun Chua

Reputation: 713

ECONNREFUSED when using apollo client to do graphQL query from getInitialProps method in nextjs

Following the with-apollo-auth example Successful behavior when I do client-side ApolloConsumer query. I pass the client through and query works.

Unsuccessful behavior when I attempt to do a server side query through getInitialProps. I pass the client through a handler that calls the same query and I get a ECONN refused error as shown below.

enter image description here

Steps to reproduce the behavior:

I set up my ApolloClient in the init-apollo file as follows:

  const httpLink = createHttpLink({
    uri: 'http://localhost:8080/api/graphql',
    credentials: 'same-origin'
  })

  const authLink = setContext((_, { headers }) => {
    const token = getToken()
    return {
      headers: {
        ...headers,
        authorization: token ? `Bearer ${token}` : ''
      }
    }
  })

  return new ApolloClient({
    connectToDevTools: process.browser,
    ssrMode: !process.browser, // Disables forceFetch on the server (so queries are only run once)
    link: ApolloLink.from([ authLink, httpLink ]),
    cache: new InMemoryCache().restore(initialState || {})
  })

I set up my query as follows:

import gql from 'graphql-tag'

export default apolloClient => {
  apolloClient
    .query({
      query: gql`
        {
          getUser {
            id
          }
        }
      `
    })
    .then(({data}) => {
      console.log(data);
      return { userDetails: data.getUser }
    })
    .catch((err) => {
      // Fail gracefully
      console.log(err);
      return { userDetails: {} }
    })
  }

I set up my getInitialProps function in the index.js file within the pages directory:

  import getUser from '../shared/services/get-user';

  static async getInitialProps (context) {
    const results = await getUser(context.apolloClient)
    console.log(results);
    return {}
  }

Expected behavior I expect to see a log of the user returned, however I get an ECONNREFUSED error as shown above.

System information OS: macOS Mojave Browser (if applies) Chrome Version of Next.js: 7.0.2 Version of ApolloClient: 2.4.12l Additional context Using Absinthe (Elixir+Phoenix) GraphQL API, url specified: http://localhost:8080/api/graphq Using docker-compose to spin up multiple containers. API and NextJS client are in separate containers sitting behind nginx server. Nginx server routes to relevant container depending on the url endpoint specified. THIS COULD VERY WELL BE THE ISSUE BUT I CAN'T SEEM TO FIND A SOLUTION TO THIS. If url contains api, client will be routed to my API container.

Here is the setup for my nginx configuration:

upstream client {
  server client:3000;
}

upstream api {
  server api:4000;
}

server {
  listen 80;

  location / {
    proxy_pass http://client;
  }

  location /sockjs-node {
    proxy_pass http://client;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
  }

  location /api {
    rewrite /api/(.*) /$1 break;
    proxy_pass http://api;
  }
}

Upvotes: 3

Views: 2378

Answers (1)

Ngatia Frankline
Ngatia Frankline

Reputation: 3236

Although answered late, your should have given more info on your backend-api framework i.e. which framework are you running? I believe frontend is nextjs. All the same i thik your problem is with nginx configuration. Please proxy_pass your url via a port number and not a \location because they are two different web services. Try this configuration, notice the headers. Also configure your OS to listen port 8030.


server {
  listen 80;

  location / {
    proxy_pass http://client;
    proxy_pass_request_headers on;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_redirect off;
  }
}

server {
  listen 8030;

  location / {
    proxy_pass http://api;
    proxy_pass_request_headers on;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_redirect off;
  }
}

Upvotes: 0

Related Questions