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