GatsbyJS’de YAML Nasıl Kullanılır?
Az buçuk GraphQL bilgisi gerekir.
Yaml Nedir?
Web sitelerinin 4 ana bileşenden ibaret olduğunu düşünelim. JS, CSS, HTML ve Data. Datalarımız da server tipine göre belirli bir yerlerde tutulur ve buralardan çağırılır. YAML dosya tipi de, bu raw (ham) verileri saklamaya yarar. Popüler olan diğer dosya tipi de JSON’dur.
Gatsby üzerinde YAML dosyası oluşturarak, sitemize veri aktarımı sağlayabiliriz. Web sitenizin render süresini uzatmadan, büyük verilerinizi bu tip dosyalardan GraphQL ile çağırmak en mantıklısıdır.
Gatsby içerisinde YAML dosyalarını okuyabilmemiz için, öncelikle gatsby-transformer-yaml pluginini kuralım. Yarn ya da NPM ile yükleyebilirsiniz.
Daha sonra gatsby-config.js dosyasında resolve ettirelim;
Config dosyasında yaptığımız her değişiklikten sonra serverı yeniden başlatmalıyız, hatta gatsby clean komutuyla cache ve public dosyalarını da temizlersek daha hızlı ve hatasız compile edebilirsiniz.
Bir manav web sitesi için, src/data içerisinde basit bir veri kolleksiyonu oluşturalım
data.yaml
Burada dikkat edilmesi gereken husus, GraphQL üzerinden JSX ya da TSX dosyanıza veri çekebilmek için StaticQuery kullanmalısınız. Sorgu listesine id ‘ de alırsanız, mapping aşamasında her bir iteme eşsiz bir key atanacağı için browser’da React hatası almazsınız.
StaticQuery:
Render Metod:
GraphQL sorgusuyla çektiğimiz datalar, “edges/node” yolunda mapping yapacak. YAML listesinde ne kadar item varsa, o kadarını render yapar. Bunu GraphQL “filter-sort” kısmından eleyebilirsiniz.
Örneğin bu örnekte, ismi sadece “Muz” olan itemları gösterir. ve “totalCount” ile filtreden geçen item sayısını gösterir. Bunu ASC-DESC olarak da sıralamanız mümkün. Ya da her bir ürüne ürün numarası ekleyip, sadece stokta olanları göster/gösterme gibi bir sorgu şeması yazabilmeniz mümkün.
Ve tarayıcı içerisindeki son görüntü de bu şekilde;
Kaynaklar:
