gridsome query 介紹

可以在每一個.vue的檔案裡面使用查詢。

• Use in Pages & Templates.
• Use in Components.

如果在script裡面就是用下面方式來取得。

this.$page.post
this.$static.post

<script>
export default {
  metaInfo() {
    return {
      title: this.$page.redditPost.title
    };
  }
};
</script>

如果是在template裡面的話，則不用加上this。

h1 {{$page.redditPost.title}}

graphQL query all nodes 多個節點

而在寫query的時候

<page-query>
query allPost{
  posts: allWordPressPost (sortBy: "title", order: DESC,filter: { id:{in:["f2gb0l","f2mpka"]}}){
    edges {
      node {
        id
        title
      }
    }
  }
}
</page-query>

• allPost是query的名稱，可以省略
• allWordPressPost是取得 graphQL 的節點
• posts:是該節點的結果，可自定義，可以從$ page.posts獲得該節點，如果沒有寫的話，則依據graphQL 的節點名稱搜尋$ page.allWordPressPost。
• sortBy,order可以做為排序依據。
• filters 可以依照條件篩選，可以參考這一頁介紹。

graphQL query a node 搜尋特定節點

利用()指定裡面的內容。

靜態搜尋

// 在post()利用括號搜尋 
query {
  post(id: "1") {
    title
  }
}

動態搜尋

配合動態產生特定頁面的時候，替換原本的query(資料來源)，適合用於template裡面顯示某一篇文章時候。

• ($id: ID!)表示宣告query的類型
• 利用$ variableName替代靜態值
• 宣告 $variableName 作為query的接受值

// template/User.vue
query  ($id: ID!){
  user (id: $id){
    path
    id
    name
    username
  }
}