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

Question

我正在使用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.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>

templates / Designer.vue

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

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

非常感谢任何帮助！