Update GraphQL query (#23)

* Update queries
Gravitalia · Aug 23, 2024 · 04687a6 · 04687a6
1 parent 10ea514
commit 04687a6
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 40 deletions.
diff --git a/front/pages/index.vue b/front/pages/index.vue
@@ -32,18 +32,19 @@ function getFormattedDate() {
 }
 
 const query = gql`
-  query GetNews($country: String!, $limit: Int!) {
-    news(country: $country, limit: $limit) {
-      title
-      description
-      publishedAt
-      image {
-        host
-        path
-      }
-      source {
-        name
-        url
+  query getNews($country: String!, $limit: Int!) {
+    news {
+      getNews(country: $country, limit: $limit) {
+        title
+        description
+        publishedAt
+        image {
+          fullUrl
+        }
+        source {
+          url
+          name
+        }
       }
     }
   }
@@ -120,9 +121,16 @@ if (error) {
       <div
         class="mt-6 px-2 md:px-6 lg:px-8 xl:px-0 grid gap-x-4 gap-y-12 md:gap-x-6 lg:gap-x-24 grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
       >
-        <CardTopNews :loading="loading || error" :article="result" />
-        <CardTopNews :loading="loading || error" :article="result" />
-        <CardTopNews :loading="loading || error" :article="result" />
+        <CardTopNews
+          v-for="news in result?.news?.getNews || Array(3).fill({})"
+          :key="news"
+          :loading="loading || error"
+          :title="news?.title"
+          :url="news?.source?.url"
+          :image="news?.image?.fullUrl"
+          :media="news?.source?.name"
+          :date="news?.publishedAt"
+        />
       </div>
     </div>
   </div>

diff --git a/front/pages/mcq.vue b/front/pages/mcq.vue
@@ -8,18 +8,25 @@ const counter = {
   skipped: ref(0),
 };
 const query = gql`
-  query GetQA($country: String!) {
-    qa(country: $country) {
-      question
-      choices
-      answer
-      article
+  query Question($country: String!) {
+    question {
+      getMcq(country: $country) {
+        question
+        choices
+        answer
+        article {
+          source {
+            url
+          }
+        }
+      }
     }
   }
 `;
 const { loading, result, error } = useQuery(query, {
   country: locale,
 });
+const question = result?.question?.getMcq;
 
 // If GraphQL API is not working, throw an error to the user.
 if (error) {
@@ -42,26 +49,31 @@ if (error) {
       <div v-else>
         {{ counter.step.value + 1 }}
         /
-        {{ result?.length || 3 }}
+        {{ question?.length || 3 }}
       </div>
     </Badge>
 
     <div v-if="loading || error">
       <div
-        class="mt-8 animate-pulse h-6 mt-2 bg-zinc-200 rounded-full dark:bg-zinc-700 w-96"
+        class="mt-8 animate-pulse h-6 bg-zinc-200 rounded-full dark:bg-zinc-700 w-96"
       ></div>
       <span class="sr-only">{{ $t("loading") }}</span>
     </div>
     <div
-      v-if="counter.step.value < result?.length || 0"
-      v-for="(qa, index) in result"
+      v-for="(qa, index) in question"
+      v-if="counter.step.value < question?.length || 0"
+      :key="qa"
     >
       <div v-if="counter.step.value === index">
         <h2 class="mt-8 font-semibold text-xl">
           {{ qa.question }}
         </h2>
 
-        <div v-for="choice in choices" class="mt-12 grid gap-y-4 grid-cols-1">
+        <div
+          v-for="choice in qa.choices"
+          :key="choice"
+          class="mt-12 grid gap-y-4 grid-cols-1"
+        >
           <button
             type="button"
             class="px-40 py-2 font-medium bg-zinc-50 hover:bg-zinc-100 text-zinc-800 dark:bg-zinc-700 dark:hover:bg-zinc-800 dark:text-zinc-300 border shadow-lg rounded-lg"

diff --git a/front/pages/summary.vue b/front/pages/summary.vue
@@ -2,18 +2,23 @@
 const { locale } = useI18n();
 const emit = defineEmits(["showError"]);
 const query = gql`
-  query GetNews($country: String!, $limit: Int!) {
-    news(country: $country, limit: $limit) {
-      title
-      summary
-      source {
-        name
-        url
-      }
-      similar {
+  query getNews($country: String!, $limit: Int!) {
+    news {
+      getNews(country: $country, limit: $limit) {
+        title
+        summary
+        image {
+          fullUrl
+        }
         source {
-          name
           url
+          name
+        }
+        similar {
+          source {
+            url
+            name
+          }
         }
       }
     }
@@ -34,13 +39,13 @@ if (error) {
   <div class="flex flex-col items-center mx-auto max-w-screen-xl px-4 py-16">
     <CardSummary v-if="loading || error" :loading="true" :numero="1" />
     <CardSummary
-      v-for="(news, index) in result"
+      v-for="(news, index) in result.news.getNews"
       v-else
       v-bind:key="news"
       :numero="index + 1"
-      title="Législatives anticipées"
-      content="Les élections législatives anticipées sont un mécanisme permettant de renouveler l'assemblée législative avant la fin de son mandat normal. Ce processus intervient dans diverses circonstances et est souvent lié à des crises politiques ou à des situations d'impasse institutionnelle. Voici un résumé détaillé de ce que sont les élections législatives anticipées, leurs causes, leurs conséquences et quelques exemples historiques."
-      learn_more="<a href=\'https://github.com/Gravitalia/news\' class=\'text-blue-600 hover:text-blue-800\'>Le Monde</a>, <a href=\'https://github.com/Gravitalia/news\' class=\'text-blue-600 hover:text-blue-800\'>Le Figaro</a>"
+      :title="news.title"
+      :content="news.summary"
+      :learn_more="`<a href='${news.source.url}' class='text-blue-600 hover:text-blue-800'>${news.source.name}</a>`"
     />
 
     <div class="mr-auto">