Cannot access to data in title from Strapi with GraphQL and Nuxt.js

Cannot access to data in title from Strapi with GraphQL and Nuxt.js


0

I have a project with Nuxt, GraphQL and Strapi.
I cannot access to a article.data.attributes.title, but I can access to article.data.attributes. I have the error message :

undefined is not an object (evaluating ‘_vm.article.data.attributes.title’).

Weirdly, when I am updating from article.data.attributes to article.data.attributes.title, it is working, but just when I refresh the page, the error is appearing again.

Here is my Vue.js :

<template>
  <div class="root-container">
    <Header />

    <main>
      <h1
        v-html="$md.render(String(article.data.attributes.title))"
        class="article-title"
      ></h1>
    </main>

    <Footer />
  </div>
</template>

<style scoped>
@import url(../../css/components/article.css);
</style>

<script>
import singleArticleQuery from "~/apollo/queries/articles/article";
import readingTime from "reading-time";
import date from "date_formating";

export default {
  methods: {
    readingTimeText(text) {
      return readingTime(`${text}`);
    },
    dateFormating(articleDate) {
      return date
        .PreDateFormate(`${articleDate}`, "DD-MM-YYYY")
        .replaceAll("-", "/");
    },
    add() {
      if (process.client) {
        return window.location.host.includes("localhost")
          ? "https://localhost:1337"
          : "";
      }
    },
  },
  data() {
    return {
      article: {
        data: [],
      },
    };
  },
  apollo: {
    article: {
      prefetch: true,
      query: singleArticleQuery,
      variables() {
        return {
          slug: this.$route.params.slug.substring(
            this.$route.params.slug.lastIndexOf("/") + 1
          ),
        };
      },
    },
  },
};
</script>

Here is my GraphQL request :

query singleArticleQuery($slug: String!) {
  article(slug: $slug) {
    data {
      id
      attributes {
        title
        content
        image {
          data {
            attributes {
              url
            }
          }
        }
        slug
        date
        author
      }
    }
  }
}

Here is the response of the request :

{ "data": { "id": "5", "attributes": { "title": "Pas d’annulation des « Loyers Covid » : fin de partie ? Portée et analyse des Arrêts du 30 juin 2022", "content": "Par trois arrêts du 30 juin 2022 (n°21-20190 ; 21.20127 et 21.19889) la 3ème Chambre de la Cour de Cassation a rejeté les trois principaux moyens développés par les locataires pour s’opposer au paiement des loyers des commerces considérés comme « non essentiels », en dépit de la fermeture ordonnée par les pouvoirs publics.nnCes décisions, si elles sont compréhensibles d’un point de vue économique (45% des commerces de détails fermés, 3 milliards de dette locative selon une note du ministère de l’économie), ne sont pas dénuées de critiques au plan du droit.nn## 1. Réponses apportées aux contestations opposées à la demande de paiement des loyersnnRappelons qu’en l’absence de dispositions spécifiques aux baux commerciaux, les locataires ont dû rechercher les ressources offertes par le droit commun du contrat de louage d’ouvrage :nn- La perte de la chose louée,n- L’obligation de délivrance du bailleur avec pour corolaire l’exception d’inexécutionn- La force majeurennLes juges du fond étaient partagés mais admettaient assez largement la perte de la chose louée au sens fonctionnel ou économique. La Cour de Cassation a entendu uniformiser la jurisprudence.nn### 1 / La perte de la chose louée (article 1722 du code civil)nnPour écarter la perte de la chose louée, la Cour de Cassation retient que l’interdiction d’accueil au public était « temporaire » et « sans lien direct avec la destination contractuelle du local ».nnCette motivation ne peut que surprendre dès lors que :nn- C’est bien la destination des lieux qui a déterminé l’application de la mesure générale d’ouverture au public ;n- Le caractère limité de la perte n’a jamais fait obstacle à l’application de l’article 1722 selon une jurisprudence ancienne. Ainsi, dans un arrêt du 29 novembre 1965, la première chambre civile de la Cour de Cassation a rejeté le pourvoi formé par le bailleur contre la décision qui avait jugé que le preneur dans l’impossibilité́ d’utiliser la chose louée « "pendant une certaine période » pouvait, sur le fondement de l’article 1722 du code civil, exiger du bailleur le remboursement d’une partie du prix de la location (Bull. civ. I, n° 655).nnDe même, la Cour de Cassation a jugé que l’arrêt, par cas fortuit, de la fourniture d’eau constitue une perte partielle justifiant une diminution du prix (Cass. 3e civ., 17 juin 1980 : Bull. civ. 1980, III, n° 116)nn### 2/ L’obligation de délivrance (article 1719 du code civil)nnLa Cour de Cassation rejette l’argument au motif que l’impossibilité d’exploiter n’était pas le fait du bailleur mais celui du législateur, privant ainsi les preneurs de la possibilité d’invoquer le principe d’exception d’inexécution.nnOr, nombre de décisions ont pourtant admis que le bailleur est garant de l’usage paisible des lieux tout au long du bail conformément aux normes en vigueur, sauf stipulation expresse contraire du bail.nn### 3/ La force majeure (article 1218 du Code Civil)nnLa Haute Cour, écarte ce fondement. On ne s’y attardera pas car ce moyen s’avérait en tout état de cause moins efficace pour le preneur qui ne pouvait lui permettre que d’obtenir un report de la dette de loyers et non pas une annulation pure et simple au regard de l’impossibilité provisoire d’exploiter.nn## 2. Est-ce à dire que le débat judiciaire est définitivement clos ?nnProbablement pas. Il faut tout d’abord relativiser la portée ces arrêts étant rappelé que les décisions ne portent que sur le premier confinement , la Haute Cour ne s’étant pas encore prononcée sur les autres vagues.nnEn outre, il n’est pas exclu que certaines juridictions puissent résister à la position exprimée par la Cour de Cassation dans des litiges dont les circonstances ne sont pas identiques.nnDans les affaires soumises à la censure de la Cour de Cassation, la bonne ou mauvaise foi des parties a en effet été relevée lorsque le bailleur avait offert de reporter le paiement du loyer et avait fait preuve de patience avant d’assigner.nnLa cour d’appel de Paris a ainsi rappelé que « Les contrats devant être exécutés de bonne foi selon l’article 1134 devenu 1104 du code civil, les parties sont tenues, en cas de circonstances exceptionnelles et graves de vérifier si ces circonstances ne rendent pas nécessaire une adaptation des modalités d’exécution de leurs obligations respectives ».nnIl ne faut pas enfin perdre de vue que tous les moyens à la disposition des preneurs n’ont pas encore été tranchés.nnAinsi en est-il :nn- Des cas où les baux contiennent une disposition prévoyant la suspension des loyers en cas de circonstances graves et légitimes ;n- De l’imprévision pour les baux conclus antérieurement à la réforme du droit des obligations de 2016 ;nn- De l’article 1131 du Code Civil pour les baux antérieurs à la réforme de 2016 comme fondement à une action en diminutiondu prix du loyer au regard de l’absence de cause à l’obligation de paiement.nnCes moyens pourraient permettre d’envisager si ce n’est l’annulation totale de la dette pendant la période d’inexploitation, au moins une réduction de loyers.", "image": { "data": { "attributes": { "url": "/uploads/11062b_49bd140ff6034d019057a7dddc081e2c_mv2_jpg_e83c5ff9c0.webp", "__typename": "UploadFile" }, "__typename": "UploadFileEntity" }, "__typename": "UploadFileEntityResponse" }, "slug": "pas-d-annulation-des-loyers-covid-fin-de-partie-portee-et-analyse-des-arrets-du-30-juin-2022", "date": "2022-12-01", "author": "Johanne Zakine", "__typename": "Article" }, "__typename": "ArticleEntity" }, "__typename": "ArticleEntityResponse" }

Share

2

  • 1

    Although I'm not familiar with nuxt this feels like the typical Apollo-Client situation where the query runs asynchronously and an attempt is made to access the data before it is returned.

    – Michel Floyd

    yesterday

  • Indeed, if I am doing a setTimeout in mounted(), and after I assign a innerText, it is working. So how can I delay the loading of the main?

    – MH info

    23 hours ago

1 Answer
1

Reset to default


1

If you add v-if="!this.$apollo.loading" to the <main>, everything is working perfectly!

See here.

Share

1

  • 1

    Yep, that makes sense.

    – Michel Floyd

    17 hours ago



Not the answer you're looking for? Browse other questions tagged

or ask your own question.

Leave a Reply

Your email address will not be published. Required fields are marked *