javascriptvue.jsfrontendvuejs3gql

Why Im not being able to filter this Array result from gql query?


To be honest I'm quite new with all these three technologies, vue, gql and typeScript, anyway the problem it's pretty simple. I'm using useQuery to fetch data and a computed prop to access the result. I want to filter the 'clubs' based on their 'locationId' before returning to the el but I just can't, trying things i created an interface which might be not a good option, here's the code:

    const { result } = useQuery(
      gql`
        query getClubAndLocations {
          getLocations {
            _id
            name
          }
          getClubs {
            _id
            name
            locationID
          }
        }
      `
    )

    interface Club {
      _id: string
      name: string
      locationID: string
    }

    const clubOptions = computed<Club[]>(() => result.value?.getClubs ?? [])

    const filterOptions = computed(() => {
      return clubOptions.filter
    })

Here's the image: enter image description here

The error says: Property 'filter' does not exist on type 'ComputedRef<Club[]>'.ts(2339)


Solution

  • computed() returns a ref, so you need to unwrap the value through its .value property:

    const filterOptions = computed(() => {
                           👇
      return clubOptions.value.filter
    })
    

    demo