Next.JS: Resolver with promise doesn't work in api-routes-server-and-client-test on SSR

Question

Using next.js example api-routes-apollo-server-and-client. When I'm trying to implement delay in apollo/resolvers.js this way:

export const resolvers = {
  Query: {
    viewer (_parent, _args, _context, _info) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({ id: 1, name: 'John Smith', status: 'cached' });
        }, 1000);
      })
    }
  }
}

This doesn't work in SSR. The data is empty in the SSR apollo state but user data expected { id: 1, name: 'John Smith', status: 'cached' }.

I'm using that also with sequelize to fetch the data from database and it doesn't work too. I guess the reason is the same.

Maybe I'm doing something wrong.

Client-side part works fine (data are displayed after React hydratation).

If we're doing static object instead of Promise:

export const resolvers = {
  Query: {
    viewer (_parent, _args, _context, _info) {
      return { id: 1, name: 'John Smith', status: 'cached' };
    }
  }
}

Everything works fine and this puts object to initial state returned from SSR server with correct static markup...

What am I expecting?

I want just server render graphql requiest, finish promises, the put the data to apollo state for SSR and does the SSR for SEO purposes. Because for now if I connect to the database - it doesn't work at all (nothing's rendered. just empty page because rendering was interrupted by something).

Answer 1

Your code is fully correct and not problem with SSR. I test your code with next.js example api-routes-apollo-server-and-client in CSR and SSR mode. For SSR test first run npm run build and then npm start. If your problem not solved try update node.js and re-download example code and again test it.