Gridsome: Error: Variable of required type "String!" was not provided

Question

I am generating a list of pages that have been working fine, and I want to add a list of categories that can query objects based on their categories. For pages with nodes here is what I did in gridsome.server.js:

data.django.jobOfferList.edges.forEach(({ node }) => {
  createPage({
        path: `/${node.category}/${node.id}`,
        component: "./src/templates/JobOfferTemplate.vue",
        context: {
          id: node.id,
        },
      });
}

This works perfectly with the following section called JobsListSection.vue:

<template>
  <section class="section">
    <h1 class="title">Nos offres d'emploi</h1>
    <div class="columns is-multiline">
      <JobOfferCard
        v-for="(edge, index) in $static.django.jobOfferList.edges"
        :key="index"
        :content="edge.node"
      />
    </div>
  </section>
</template>

<static-query>
query retrieveAllOffersByReverseChronology {
  django {
    jobOfferList(orderBy: "-created_at") {
      edges {
        node {
          id
          description
          company
          category
          active
          createdAt
          title
        }
      }
    }
  }
}
</static-query>

<script>
import JobOfferCard from "@/components/JobOfferCard.vue";
export default {
  name: "JobsListSection",
  components: { JobOfferCard },
};
</script>

Now, I have tried to create templates based on categories; here is how I added it in gridsome.server.js:

createPage({
        path: `/${node.category}`,
        component: "./src/templates/JobsCategoryListSection.vue",
        context: {
          category: node.category,
        },
      });

We can see that I am passing an argument called category; but when I query it in my template as follows:

<static-query>
query ($category: String) {
  django {
    jobOfferList(category_Icontains: $category) {
      edges {
        node {
          id
          description
          company
          category
          active
          createdAt
          title
        }
      }
    }
  }
}
</static-query>

I get the following error:

Module build failed (from ./node_modules/gridsome/lib/plugins/vue-components/lib/loaders/static-query.js):
Error: Variable "$category" of required type "String!" was not provided.

I don't understand why it can't detect the variable category that I am passing. Is there something wrong on my code?

Answer 1

Fixed it! It was only a small error; had to change <static-query> to <page-query>. Works perfectly fine now, it seems that static query do not take variables in Gridsome.