显示来自GraphQL查询的Vue中的嵌套循环

<template>
  <div>
    <div v-for="item in nestedData" :key="item.id">
      <h2>{{ item.title }}</h2>
      <ul>
        <li v-for="subItem in item.subItems" :key="subItem.id">
          {{ subItem.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { gql } from 'apollo-boost';
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';

export default {
  data() {
    return {
      nestedData: [],
    };
  },
  created() {
    const httpLink = new HttpLink({
      uri: 'https://example.com/graphql', // 替换为你的GraphQL API地址
    });

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

    const query = gql`
      query {
        nestedData {
          id
          title
          subItems {
            id
            name
          }
        }
      }
    `;

    client.query({ query })
      .then(response => {
        this.nestedData = response.data.nestedData;
      })
      .catch(error => {
        console.error(error);
      });
  },
};
</script>