my code has a query that returns a collection of books:

import { useQuery, useResult, useMutation } from "@vue/apollo-composable";
import gql from "graphql-tag";

const GETALLBOOKS = gql`
  query Query {
    getAllBooks {
      id
      name
    }
  }
`;

export default {
  setup() {
    const { result, onResult } = useQuery(GETALLBOOKS);
    const books = useResult(result, null, (data) => data.getAllBooks);

    return {
      books
    };
  },

This works fine, and I could use "books" in my template.

However, the "books" in a format of:

[{
  id: 1,
  name: "book1"
},{
  id: 2,
  name: "book2"
}]

In my template, I actually need an array of book names like:

["book1", "book2"]

Converting from JSON objects array to string array is easy. However, I'm struggling to find a place to make the conversion. If I convert it in the setup() method, "books" is "undefined".

I totally understand why "books" is "undefined" in the setup() method. It's explained here https://v4.apollo.vuejs.org/guide-composable/query.html#usequery:

Beware that result may not contain your data at all time! It will initially be undefined until the query successfully completes.

The question is: where to make the conversation so that the book names array is ready to be used in the template?