GraphQL 语句

基本查询语句

特殊语法

Argument	Default	Description
sortBy	“date”	Sort by a node field.
order	DESC	Sort order (DESC or ASC).
sort		Sort by multiple node fields.
skip	0	How many nodes to skip.
limit		How many nodes to get.
page		Which page to get.
perPage		How many nodes to show per page. Omitted if no page argument is provided.
filter	{}	Read more.

• 查询集合

模式中的某些根字段以前缀all。使用它们来获取集合中节点的列表。

有条件查询

• 查询单个节点

  • 查询不以all 开头的模版中的内容，/也可以查询以all开头的内容
  • 必须提供一个参数,用来查找 id or path

• 查询页面组件中的数据

每个页面都可以具有一个<page-query>带有GraphQL查询的块，以从数据源获取数据。结果将存储在 $page页面组件内的属性中。

eg: 下面例子是在gridsome 中创建的一个页面级组件

<template>
  <Layout>
     <Section container="md" class="blog-posts">
      <div class="mb-x2 container-sm text-center">
        <h1>Gridsome  - Test</h1>
      </div>
      <Product v-for="edge in $page.posts.edges" :key="edge.node.id" :post="edge.node"/>
      <!-- <Product  :post="$page.posts.edges"/> -->
      <!-- 因为是一个数组，所以要遍历才能显示 -->
      <!-- <div v-for="edge in $page.posts.edges" :key="edge.node.id">{{edge.node.excerpt}}</div> -->
      <p class="text-center">
        Want to contribute to Gridsome blog?
        <g-link to="/docs/how-to-contribute#contributing-to-the-blog"> Learn more here</g-link>
      </p>
    </Section>
  </Layout>
</template> 

<page-query>
query BlogPosts {
  posts: allProduct {
    edges {
      node {
        id
        title
        path
        date (format: "D. MMMM YYYY")
        timeToRead
        author {
          title
          path
          avatar (width: 60)
        }
        excerpt
        content
      }
    }
  }
}
</page-query>

<script>
import Product from '../components/Product.vue'

export default {
  components: {
    Product
  },
  metaInfo: {
    title: 'Blog'
  }
}
</script>

• 查询任何组件中的数据

每个Vue组件都可以具有一个<static-query>带有GraphQL查询的块，以从数据源获取数据。结果将存储在$static组件内部的属性中。<static-query>之所以称为静态是因为它不能接受任何变量。

<template>
  <div v-html="$static.post.content" />
</template>

<static-query>
query Post {
  post(id: "1") {
    content
  }
}
</static-query>