如何在BootstrapVue b表中使用GraphQL查询？

import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core';
import { DefaultApolloClient } from '@vue/apollo-composable';
import { gql } from '@apollo/client/core';

const httpLink = createHttpLink({
  uri: 'https://your-graphql-server.com/graphql', // 替换为你的GraphQL服务器URL
});

const apolloClient = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
});

<template>
  <default-apollo-client :client="apolloClient">
    <!-- 在这里编写你的BootstrapVue表格和其他内容 -->
  </default-apollo-client>
</template>

<template>
  <div>
    <b-table :items="data.items" :fields="fields"></b-table>
  </div>
</template>

<script>
import { useQuery } from '@vue/apollo-composable';

export default {
  setup() {
    const { result } = useQuery(gql`
      query {
        items {
          id
          name
          description
        }
      }
    `);

    const data = result.value?.data;
    const fields = ['id', 'name', 'description'];

    return {
      data,
      fields,
    };
  },
};
</script>