Nuxt3: Strapi Content not Updating on Production Server

Question

I am currently working on a site (mbmobilesauna.de) with Nuxt3 in the frontend. My backend is Strapi CMS. Both sites are actively running actually well in prod and dev. Side note: I've only been involved with Nuxt for a few months.

My problem:

I maintain the content of my site (https://mbmobilesauna.de) with Strapi. If I now change content in Strapi, this should then also update the website. This works so far but ONLY on localhost and not on the actual production URL.

My two sites (frontend, backend) are hosted at a service provider that uses Cloudflare. This service provider has assured me 100% that the problem is not with Cloudflare. Cloudflare caches the page only 4 hours and after the 4 hours the content should change but unfortunately this is not the case.

For my frontend project I have a Dockerfile and a Deployment.yaml which automatically publish my project as soon as I commit something new. To exclude that this is the reason, I have also tested all locally in a Docker container. Here the desired behavior is there. As soon as I change something in Strapi, the page that is in the Docker container is updated directly.

To exclude the possibility that this is a bug in Strapi, I used the Strapi prodction URL in the local development environment.

As already mentioned, everything works as it should perfectly on localhost. But as soon as the page is in production, the content is no longer updated unless I manually make a release in the frontend pipeline. (This behavior is not desired)

What I tried:

• Try another hosting provider (Netlify, Firebase) - Here I have the same problem again in Production.

• Try different browsers (Chrome, Firefox, Opera) - Again the same problem

• Deactivate cache - Again the same problem

• Clear cache completely - Again the same problem

How do I get my data out of Strapi:
nuxt.config.ts

  apollo: {
    clients: {
      default: {
        httpEndpoint: `https://STRAPI_PROD_URL/graphql`,
        browserHttpEndpoint: `https://STRAPI_PROD_URL/graphql`,
        connectToDevTools: false,
      },
    },
  },

index.vue

import gql from "graphql-tag";

const GET_HOMEPAGE = gql`
  query Homepage {
    homepage {
      data {
        id
        attributes {
          body {
            __typename
            ... on ComponentContentTypeCtLandingSection {
              id
              title
              landingDesc: description
              images {
                data {
                  id
                  attributes {
                    url
                    alternativeText
                  }
                }
              }
              link {
                id
                label
                url
                style
                unterseiten {
                  data {
                    id
                    attributes {
                      title
                      slug
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
`;

const { data }: any = await useAsyncQuery({
  query: GET_HOMEPAGE,
  cache: false
});

I use for my requests NuxtApollo (https://apollo.nuxtjs.org/) and GraphQL**

I have provided my complete repo here for more details:**
https://github.com/Nirwana3301/SaunaFrontendNuxtStackoverflow

Can anyone help me?

Answer 1

Unfortunately I have not found out what was wrong with Apollo. In any case, I have now used the Nuxt/Strapi module.

Here is my code:

import homepageQuery from "../queries/Homepage.gql";

const graphql = useStrapiGraphQL()

const { data } : any = await graphql(homepageQuery)

Answer 2

So the problem I have is 100% with Apollo. I used the Nuxt/Strapi module (https://strapi.nuxtjs.org/) to get my data out of Strapi and everything worked perfectly the way I wanted it to.

I would still like to find out why it doesn't work with Apollo.

When I have found a solution I will close the issue. I will then post the solution here