Experimenting using GraphQL in favor of REST.

assets/js/api.js

@@ -21,7 +21,7 @@ async function get(endpoint, query = {}) {
 
 async function post(endpoint, data) {
     const res = await fetch(`${config.api.url}${endpoint}`, {
-        method: 'GET',
+        method: 'POST',
         mode: 'cors',
         headers: {
             'Content-Type': 'application/json',
@@ -39,4 +39,34 @@ async function post(endpoint, data) {
     throw new Error(errorMsg);
 }
 
-export { get, post };
+async function graphql(operationName, query, variables = null) {
+    const res = await fetch('/graphql', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        credentials: 'same-origin',
+        body: JSON.stringify({
+            operationName,
+            query,
+            variables,
+        }),
+    });
+
+    if (res.ok) {
+        const { data } = await res.json();
+
+        return data;
+    }
+
+    const errorMsg = await res.text();
+
+    throw new Error(errorMsg);
+}
+
+export {
+    get,
+    post,
+    graphql,
+};

assets/js/releases/actions.js

@@ -1,14 +1,97 @@
-import { get } from '../api';
+import { get, graphql } from '../api';
 
-function initReleasesActions(store, _router) {
+function initReleasesActions(_store, _router) {
     async function fetchReleases({ _commit }) {
+        /*
         const releases = await get('/releases', {
             filter: store.state.ui.filter,
             after: store.getters.after,
             before: store.getters.before,
         });
+        */
 
-        return releases;
+        const { releases } = await graphql('MyQuery', `
+            query MyQuery {
+              releases(orderBy: DATE_DESC) {
+                id
+                title
+                description
+                date
+                duration
+                createdAt
+                shootId
+                url
+                actors: actorsAssociateds {
+                  actor {
+                    id
+                    name
+                    slug
+                    origin: countryByBirthCountryAlpha2 {
+                      alpha2
+                      name
+                    }
+                    avatar: actorsMediasByTargetId(condition: { role: "avatar" }) {
+                      id
+                      thumbnail
+                      path
+                      mime
+                    }
+                  }
+                }
+                poster: releasesMediasByTargetId(condition: { role: "poster" }) {
+                  mime
+                  id
+                  index
+                  path
+                  thumbnail
+                  role
+                }
+                photos: releasesMediasByTargetId(condition: { role: "photos" }) {
+                  mime
+                  id
+                  index
+                  path
+                  thumbnail
+                  role
+                }
+                tags: releasesTagsByTargetId {
+                  tag {
+                    name
+                    priority
+                    slug
+                    id
+                  }
+                }
+                site {
+                  id
+                  name
+                  slug
+                  url
+                  network {
+                    id
+                    name
+                    slug
+                    url
+                  }
+                }
+              }
+            }
+        `);
+
+        const curatedReleases = releases.map(release => ({
+            ...release,
+            actors: release.actors.map(({ actor }) => ({
+                ...actor,
+                avatar: actor.avatar[0],
+            })),
+            poster: release.poster[0],
+            network: release.site.network,
+            tags: release.tags.map(({ tag }) => tag),
+        }));
+
+        console.log(curatedReleases);
+
+        return curatedReleases;
     }
 
     async function fetchReleaseById({ _commit }, releaseId) {