VueJS + Apollo + Graphql Sorting

#1

Hi guys,

I have an issue with my app.

I have a list of properties. To get this list I’m using a query from Graphql with Apollo, like this.

apollo: { //Apollo object
      properties: { //property
        query: listPropertys,
        update(data) {
          return data.listPropertys.items;
        }
      }
    }

It works well. I have a form on the same page where I can sort the list, I can filter by category (house, appartement, …) But I don’t know what to do when I click in my select component. I’ve done this :

apollo: { //Apollo object
      properties: { //property
	     query: gql`
            query listProperties {
                listPropertys(filter: {
                    category: {contains: this.category} 
                }) {
		        items {...}
	         }
           }`,
    	   // Disable the query
		   skip() {
			 return this.skipQuery
		   },
           update(data) {
              return data.listPropertys.items;
           }
         }
		},
		methods: {
			onChange() {
				this.$apollo.queries.properties.skip = false //reactive the query
				this.$apollo.queries.properties.refetch()
			}
		}

If I check my Graphql plugin in Chrome, I can see a new query is called everytime I pick a category in my select component but my UI is not changing. I don"t know how to change the list of properties to display only properties sorted by category appartement (for example)

Any ideas ?