Vue.js 如何使用Gridsome和Graphql查询Airtable关系数据？

我正在使用Airtable模板和Gridsome查询产品目录模板中的家具。在AirTable中，家具数据表具有“designers”属性，该属性的值为创建家具的设计师的id。其思想是使用该ID值创建另一个查询，并获取特定设计器的所有数据。设计师们有自己的桌子，所以我的问题是。我如何创建一个关系查询来获取ID的路径和“设计器”的数据

我的gridsome.config.js

module.exports = {
  siteName: 'Furniture Store',
  plugins: [
    {
      use: '@gridsome/source-airtable',
      options: {
        apiKey: 'keyhMlUJl9q3uzk0b', // required
        baseId: 'appkEp5El5UHrgnks', // required
        tableName: 'Furniture', // required
        typeName: 'Product', // required
      }
    },

    {
      use: '@gridsome/source-airtable',
      options: {
        apiKey: 'keyhMlUJl9q3uzk0b', // required
        baseId: 'appkEp5El5UHrgnks', // required
        tableName: 'Designers', // required
        typeName: 'Designers', // required
      }
    },
  ],
  templates: {
    Designers: '/designer/:id' // optional
  }
}

Index.vue

<template>
  <Layout>
    <h1>Furniture store</h1>
    <ProductCard
      v-for="product in $page.allProduct.edges"
      :key="product.node.id"
      :product="product"
      />
  </Layout>
</template>


<page-query>
query {
  allProduct {
    edges {
      node {
        id
        name
        designer
        description
        type
        inStock
        images {
          thumbnails {
            large {
              url
              width
              height
            }
          }
        }
      }
    }
  }
}



</page-query>


<script>
import ProductCard from '~/components/ProductCard';

export default {
  components: {
    ProductCard
  }
}
</script>

家具店
质疑{
所有产品{
边缘{
节点{
身份证件
名称
设计师
描述
类型
因斯托克
图像{
缩略图{
大的{
网址
宽度
高度
}
}
}
}
}
}
}
从“~/components/ProductCard”导入ProductCard；
导出默认值{
组成部分：{
产品卡
}
}

组件/ProductCard.vue

<template>
    <v-app>
        <v-card
        class="mx-auto my-12"
        max-width="374"
    >
            <v-img
            height="250"
            :src="product.node.images[0].thumbnails.large.url"
            ></v-img>

            <v-card-title>{{ product.node.name }}</v-card-title>

        <v-card-text>
        <v-row
            align="center"
            class="mx-0"
        >
            <v-rating
            :value="4.5"
            color="amber"
            dense
            half-increments
            readonly
            size="14"
            ></v-rating>

            <div class="grey--text ml-4">4.5 (413)</div>
        </v-row>

        <div class="my-4 subtitle-1 black--text">
            {{ product.node.description }}
        </div>

          <g-link to="/">Link to Designer</g-link>
        </v-card-text>

        <v-divider class="mx-4"></v-divider>

        <v-card-title>Tonight's availability</v-card-title>
    </v-card>
    </v-app>
</template>

<script>
export default {
    name: 'ProductCard',
    props: {
        product: {
            type: Object,
            required: true,
        },
    },

}
</script>

{{product.node.name}
4.5 (413)
{{product.node.description}
链接到设计器
今晚有空吗
导出默认值{
名称：'ProductCard'，
道具：{
产品：{
类型：对象，
要求：正确，
},
},
}

模板/Designer.vue

 <template>
   <h1>{{ $page.designers.name }}</h1>
 </template>

 <page-query>
 query Designer($id: ID!) {
  designers(id: $id) {
    name
    id
    bio
  }
}
 </page-query>

{{$page.designers.name}
查询设计器（$id:id！）{
设计师（id:$id）{
名称
身份证件
生物
}
}

---

非常感谢您的帮助

最近，Gridsome Airtable插件有一个更新，允许在

Gridsome.config

中指定一个

links

选项，这在这里可能很有用：谢谢，我会研究它