Vue, Apollo, GraphQL queries (with Strapi)

Hey guys,

I’m trying to fetch data via Apollo and GraphQL from my Strapi backend. I have a collection type of “campaigns” consisting of an id, name, url and an array of images. The goal is to display all of the images of a certain campaign in the “Campaign.vue” view.

This is my code so far:

<template>
  <div class="content">
    <img
      class="campaign-image"
      v-for="(image, index) in campaigns[0].images"
      :key="index"
      :src="`http://localhost:1337${image.url}`"
      :alt="image.alternativeText"
    />
  </div>
</template>
<script>
import gql from "graphql-tag";

export default {
  name: "Campaign",
  data() {
    return {
      campaigns: []
    };
  },
  apollo: {
    campaigns: gql`
      query {
        campaigns(where: { url: "2013" }) {
          images {
            url
            alternativeText
          }
        }
      }
    `
  }
};
</script>

It works well despite the fact that I get en error of…

TypeError: Cannot read property 'images' of undefined

I suspect this happens when Vue initially tries to render the v-for before the data has been fetched from Strapi. Is there a way to avoid this? Will I have to use Vuex and get the data from Strapi to the store? I’m relatively new to Vue and have never worked with Vuex.

The second issue is that I can’t seem to make Apollo variables work. Ultimately I want fetch the campaign that corresponds with the given “$route.params.id”. I’ve tried…

<script>
import gql from "graphql-tag";

export default {
  name: "Campaign",
  data() {
    return {
      campaigns: []
    };
  },
  apollo: {
    campaigns: gql`
      query Campaign($url: String!) {
        campaigns(where: { url: $url }) {
          images {
            url
            alternativeText
          }
        }
      }
    `,
    variables: {
      url: "2013"
    }
  }
};
</script>

…but I get an error of…

Network error: Response not successful: Received status code 400

Thanks for your help!

Start by going to http://localhost:1337/graphql and running your query directly against strapi. Does it work? It sounds like there is a permission error. Have you set the permissions on the Strapi side of things? The permissions are closed by default. In the Strapi admin console go into Roles & Permissions, select the Public role and enable the find/findone for the content types you are trying to get.

Thanks! Running it directly from the playground had been working already und the permissions were set. I just found a solution for both of my issues though:

My suspicion that Vue would be trying to render the images when the data wasn’t ready seems to have been correct. I’ve been able to get rid of the error like so:

<div class="content" v-if="!$apollo.loading">

Also, with regards to the second issue, I figured out that my syntax was wrong. I copied it from a tutorial that I watched, but finally realized I had to write the query like this:


  apollo: {
    campaigns: {
      query: gql`
        query Campaign($url: String!) {
          campaigns(where: { url: $url }) {
            images {
              url
              alternativeText
            }
            credits
          }
        }
      `,
      variables() {
        return {
          url: this.url
        };
      }
    }

Another thing that I can’t seem to solve is resolving queries with multiple aliases:

apollo: {
    campaigns: gql`
      query getCampaigns {
        campaigns: campaigns(where: { archive: "false" }, sort: "order:DESC") {
          name
          url
        }
        archive: campaigns(where: { archive: "true" }, sort: "order:DESC") {
          name
          url
        }
      }
    `
  }

It works well when I try it with the GraphQL playground, but in Vue Apollo I only get the “campaigns” array fetched while the “archive” array stays empty. Has anyone of you dealt with this before?