Helpers to use together with @vue/apollo-composable

apollo-helpers.ts

import { gql } from "@apollo/client/core";
import { useQuery } from "@vue/apollo-composable";
import { computed, ComputedRef, Ref } from "vue";

export interface ApolloResult<Model> {
  // This key is usually the name of the query
  [key: string]: Model | undefined;
}

type ApolloResultRef<Model> = Ref<ApolloResult<Model> | undefined>;

// Inspired by deprecated useResult from vue-apollo
export function useFirstResult<Model>(
  result: ApolloResultRef<Model>,
  defaultValue: Model
): ComputedRef<Model>;
export function useFirstResult<Model>(
  result: ApolloResultRef<Model>
): ComputedRef<Model | undefined>;
export function useFirstResult<Model>(
  result: ApolloResultRef<Model>,
  defaultValue?: Model
) {
  return computed(
    () => result.value?.[Object.keys(result.value)[0]] ?? defaultValue
  );
}

export const GET_NAMES_QUERY = gql`
  query getNames() {
    getNames
  }
`;

const { result, loading } = useQuery<ApolloResult<string[]>>(GET_NAMES_QUERY);
const names = useFirstResult(result, []);