I am working on a blogs page that consists of two main components: filter and card

<template>
  <div>

    <div v-if='$apollo.loading'>Fetching data...</div>
    
    <div v-else>
      <FilterComponent :categories='categories' />

      <Card :blogs='blogs' />
    </div>

  </div>
</template>

<script>
import blogsGQL from '../graphql/blog/blog.graphql'
import categoriesGQL from '../graphql/category/category.graphql'
import Card from '~/components/Blog/Card'
import FilterComponent from '~/components/Blog/FilterComponent'

export default {
  name: 'Blogs',
  components: { FilterComponent, Card },
  layout: 'blog',

  apollo: {
    blogs: {
      query: blogsGQL,
      prefetch: true
    },
    categories: {
      query: categoriesGQL,
      prefetch: true
    }
  }
}
</script>

In the filterComponent, there is a select dropdown filled with categories from the database. When a category is selected, a GraphQL query is triggered to fetch blog posts filtered by category_id.

<template>
  <div class='w-full bg-gray-200 dark:bg-gray-900 py-10'>
    <div class='container mx-auto px-6 flex items-start justify-center'>

      <form id='filter' @submit.prevent>
        <div class='mt-16 flex flex-col  w-full'>
          <select id='category'
                  v-model.number='selected'
                  class='dark:border-gray-700 pl-3 py-3 shadow-sm rounded text-sm focus:outline-none focus:border-indigo-700 bg-transparent placeholder-gray-500 text-gray-500 dark:text-gray-400'
          >
            <option value='0' selected>Choose category</option>
            <option v-for='category in categories' :key='category.id' :value='category.id'>
              {{ category.category }}
            </option>
          </select>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import blogPostByCategoryId from '~/graphql/blog/blogByCategoryId.graphql'

export default {
  name: 'FilterComponent',

  props: {
    categories: {
      type: Array,
      required: true
    }
  },

  data() {
    return {
      selected: 0
    }
  },

  apollo: {
    blogPostByCategoryId: {
      query: blogPostByCategoryId,
      variables() {
        return {
          category_id: this.selected
        }
      },
      skip() {
        return !this.selected
      }
    }
  }
}
</script>

Now I need to update the card component with the new data received from the filter component. Is it possible to pass the blogPostByCategoryId result back into the card component?

EDIT:

I made some progress by creating an index.js file inside the store directory of Nuxt with the following code:

import blogsGQL from '~/graphql/blog/blog.graphql'

export const state = () => ({
  blogs: []
})


export const actions = {
  async nuxtServerInit({ commit }, context) {
    const client = context.app.apolloProvider.defaultClient

    const response = await client.query({ query: blogsGQL })

    commit('setBlogs', response.data.blogs)
  }
}

export const mutations = {
  setBlogs(state, blogs) {
    state.blogs.push(...blogs)
  },

  filter(state, categoryId) {
    return state.blogs.filter(blog => blog.category_id === categoryId)
  }
}

I retrieve blog posts from the GraphQL API and store them in the state. I pass this data down to the card component in my parent component like so:

      <Card :blogs='blogs' />


  computed: {
    blogs() {
      return this.$store.state.blogs
    }
  },

However, when trying to loop over the array inside the card component, all I get is blank space. The data is present in the blogs array when console logged.

EDIT 2:

I have updated my file and created a getter to filter the blogs:

export const getters = {
  filterdBlogs: state => (categoryId) => {
    return state.blogs.filter(blog => blog.category_id === categoryId)
  }
}

I call this method in the Apollo update method within the filterComponent:

      update(data) {
        const id = data.blogByCategoryId[0].category_id

        this.$store.getters.filterdBlogs(id)
      }

The filtering seems to work correctly, but the card component is not being updated with the filtered data.

EDIT 3:

To address the updating issue, I made changes to the card component by directly accessing the store:

// card component

<template>
  <div class='w-full bg-gray-200 dark:bg-gray-900 py-10'>
    <div class='container mx-auto px-6 flex justify-center'>
      <div class='w-full'>
        <div v-for='blog in blogs'
             :key='blog.id'
             class='flex flex-row  mx-auto bg-white dark:bg-gray-800 justify-center shadow rounded'>
          <div class='w-full lg:w-1/3 px-12 flex flex-col items-center py-10'>
            <div class='w-24 h-24 mb-3 p-2 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center'>
              <img class='w-full h-full overflow-hidden object-cover rounded-full'
                   :src='`https://tuk-cdn.s3.amazonaws.com/assets/components/grid_cards/gc_${blog.id}.png`'
                   alt='avatar' />
            </div>
            <h2 class='text-gray-800 dark:text-gray-100 text-xl tracking-normal font-medium mb-1'>{{ blog.title }}</h2>
            <p class='text-gray-600 dark:text-gray-100 text-sm tracking-normal font-normal mb-8 text-center w-10/12'>
              {{ blog.big_text }}</p>
            <p class='text-gray-600 dark:text-gray-100 text-sm tracking-normal font-normal mb-8 text-center w-10/12'>
              {{ blog.small_text }}</p>
            <div class='flex items-start'>
              <div class='mx-6 border-l border-r'>
                <NuxtLink :to='`blog/${blog.slug}`'>
                  <button type='submit'
                          class='group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'>
                    Read more
                  </button>
                </NuxtLink>
              </div>
              <div class='mx-4 border-l border-r'>
                <h2
                  class='group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white text-black'>
                  Posted on {{ blog.created_at | formatDate }}
                </h2>
              </div>
              <div class='mx-4 border-l border-r'>
                <h2
                  class='group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white text-black'>
                  Updated on {{ blog.updated_at | formatDate }}

                </h2>
              </div>
            </div>
          </div>
        </div>
        <!-- Card code block end -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Card',

  filters: {
    formatDate: (dateStr) =>
      Intl.DateTimeFormat('us-EN').format(new Date(dateStr))
  },

  computed: {
    blogs() {
      return this.$store.state.blogs
    }
  }

}
</script>

When a value is selected in the dropdown menu, the state is not updated:

// dropdown component

<template>
  <div class='w-full bg-gray-200 dark:bg-gray-900 py-10'>
    <div class='container mx-auto px-6 flex items-start justify-center'>

      <form id='filter' @submit.prevent>
        <div class='mt-16 flex flex-col  w-full'>
          <select id='category'
                  v-model.number='selected'
                  class='dark:border-gray-700 pl-3 py-3 shadow-sm rounded text-sm focus:outline-none focus:border-indigo-700 bg-transparent placeholder-gray-500 text-gray-500 dark:text-gray-400'
          >
            <option value='0' selected>Choose category</option>
            <option v-for='category in categories' :key='category.id' :value='category.id'>
              {{ category.category }}
            </option>
          </select>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import blogPostByCategoryId from '~/graphql/blog/blogByCategoryId.graphql'

export default {
  name: 'FilterComponent',

  props: {
    categories: {
      type: Array,
      required: true
    }
  },

  data() {
    return {
      selected: 0
    }
  },

  apollo: {
    blogPostByCategoryId: {
      query: blogPostByCategoryId,
      variables() {
        return {
          category_id: this.selected
        }
      },
      skip() {
        return !this.selected
      },
      update(data) {
        const id = data.blogByCategoryId[0].category_id

        this.$store.commit('filter', {
          categoryId: id
        })
      }
    }
  }
}
</script>

<style scoped>

</style>

The filter method in Vuex mutations looks like this :

export const mutations = {
  filter(state, payload) {
    return state.blogs.filter(blog => blog.category_id === payload.categoryId)
  }
}