Link Search Menu Expand Document

GraphQL

Table of contents

QraphQL

  • StaticQuery
  • PageQuery

  • useStaticQuery Hook

  • They complete the same task, only the implementation is different.

Simple GraphQL

GraphQL interface

siteMetadata - 1

siteMetadata - 2

Explore

useStaticQuery Hook

useStaticQuery Hook - 1

useStaticQuery Hook - 2

useStaticQuery, graphQL from scratch

Field Alias

  • Using whatever-name with : in front of siteMetadata, whatever-name will become the alias.

      query MyQuery {
  site {
      info:siteMetadata {
      title
      }
  }
  }

Query Keyword, Name and Gatsby Clean

  • MyQuery is the Query Keyword, it requires to be unique

      query MyQuery {
  site {
      info:siteMetadata {
      title
      }
  }
  }

Page Query

  • Use plugin: [gatsby-source-filesystem]

allFile - field

  • Collection of data

allFile

Query Arguments

Query Arguments

Query Filter

File Field

Single File

sourceInstanceName Arguments

sourceInstanceName

Gatsby Images Gallery