seo Question posted in
Some basic information to get you started with this can be found here.

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

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);
      })
    }
  }
}

enter image description here

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…

enter image description here

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).

Tags:

2

Answers


  1. 0

    If you’re trying to emulate the possible delay involved in resolving a remote request, or resolving promises in handlers in general, try this:

    export const resolvers = {
  Query: {
    async viewer(_parent, _args, _context, _info) {
      try {
        const resp = await new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve({ id: 1, name: 'John Smith', status: 'cached' })
          }, 1000)
        })
        return resp
      } catch (err) {
        throw new Error('failed')
      }
      // return { id: 1, name: 'John Smith', status: 'cached' }
    },
  },
}

    return await new Promise() doesn’t work because the await keyword doesn’t do anything in that case, and the object returned is still a promise, where your resolvers expect the return value to be an object.

    Assigning await new Promise(...) to a variable makes sure the promise resolves, and that the variable contains the expected object prior to being returned.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search