Setting up strapi apollo graphQL on AWS

Questions and Answers
1

Hello -

I followed this guide to create a Nuxt + Strapi + Apollo GraphQL website and then followed the strapi guide for deploying to AWS.

I now have Strapi running on an aws instance and my frontend on AWS Amplify. I am now trying to setup GraphQL so my website can pull content from strapi. But I’m not able to get it working.

Steps to reproduce the behavior

  1. Create Strapi backend
  2. Deploy Strapi backend to AWS
  3. Create Nuxt frontend
  4. Deploy Nuxt frontend to AWS Amplify
  5. Now you have a front end and a back end, we arrive at the problem: how to configure a strapi AWS endpoint so the frontend can query the strapi backend to get strapi content?

Nuxt frontend should be able to connect to strapi endpoint and query strapi content. Instead an error is appearing:

  graphql: {
endpoint: "/graphql",
shadowCRUD: true,
playgroundAlways: false,
depthLimit: 7,
amountLimit: 100,
apolloServer: {
  tracing: false
}
  }

On the frontend, I have apollo configured on nuxt.config.js like this:

  apollo: {
clientConfigs: {
  default: {
    httpEndpoint: http://xx.xx.xx.xx:1337/graphql
  }
}

},

But I building my nuxt frontend I am getting the following error:

Error: Network error: Unexpected token M in JSON at position 0
at new ApolloError (/.../.../frontend/node_modules/apollo-client/bundle.umd.js:92:26)
at .../.../frontend/node_modules/apollo-client/bundle.umd.js:1588:34
at .../.../frontend/node_modules/apollo-client/bundle.umd.js:2008:15
at Set.forEach (<anonymous>)
at /.../...//frontend/node_modules/apollo-client/bundle.umd.js:2006:26
at Map.forEach (<anonymous>)
at QueryManager.broadcastQueries (/.../.../frontend/node_modules/apollo-client/bundle.umd.js:2004:20)
at /.../.../frontend/node_modules/apollo-client/bundle.umd.js:1483:29
at processTicksAndRejections (internal/process/task_queues.js:97:5)

I also tried using https in the endpoint url, which produces a different error:

Error Network error: request to https://xx.xx.xx.xx:1337/graphql failed, reason: write EPROTO 4583923200:error:1408F10B:SSL routines:ssl3_get_record:wrong version number:../deps/openssl/openssl/ssl/record/ssl3_record.c:332:

Error Network error: request to https://xx.xx.xx.xx:1337/graphql failed, reason: write EPROTO 4583923200:error:1408F10B:SSL routines:ssl3_get_record:wrong version number:../deps/openssl/openssl/ssl/record/ssl3_record.c:332:


 ERROR   /                                                                                                                                                               19:09:11

Error: Network error: request to https://xx.xx.xx.xx:1337/graphql failed, reason: write EPROTO 4583923200:error:1408F10B:SSL routines:ssl3_get_record:wrong version number:../deps/openssl/openssl/ssl/record/ssl3_record.c:332:

at new ApolloError (/.../node_modules/apollo-client/bundle.umd.js:92:26)
at /.../frontend/node_modules/apollo-client/bundle.umd.js:1588:34
at /.../frontend/node_modules/apollo-client/bundle.umd.js:2008:15
at Set.forEach (<anonymous>)
at /.../frontend/node_modules/apollo-client/bundle.umd.js:2006:26
at Map.forEach (<anonymous>)
at QueryManager.broadcastQueries (/.../frontend/node_modules/apollo-client/bundle.umd.js:2004:20)
at /.../frontend/node_modules/apollo-client/bundle.umd.js:1483:29
at processTicksAndRejections (internal/process/task_queues.js:97:5)

I’m not sure if I’m missing some authentication somewhere how to configure that.

Any help much appreciated.

System Information 
Node.js version: v12.13.1
NPM version:6.12.1
Strapi version: "3.6.2"
Database: Amazon AWS EC2
Operating system: MacOS 11.3.1