GROQ を学ぶ

Playground を利用

GROQ を利用したクエリの実行、結果の確認が可能な Playground が Studio に含まれています。メニューの上に表示されている Vision を選択してください。

開いたタイミングでは Query が設定されていないため、何も表示されません。

ガイドの手順とは異なりますが、以下のように実行していきます。まず Query に * を入れて実行します。

全てのデータが表示されている状況となります。スキーマタイプ event でフィルタをする場合は、 *[_type==“event”] を入れて実行します。結果は、データの量が減ってイベントのデータ飲みが取得できています。

イベントの項目がいくつか表示されていますが、必要なデータは name だけの場合、*[_type==“event”].name を実行すると name 一覧を取得できます。

タイトルだけを取得するのであれば上記で問題ありませんが、実際にはイベントのスキーマから必要なデータを取得したい場合があります。この場合は、以下のような Query を入れてください。

*[_type=="event"]
{
  _type,
  _id,
  name,
}

結果として、イベントの ID と名前を取得することができました。

条件としては _type が event の場合を取得していました。

実際にイベントの日付が未来のもののみを取得したい場合は、以下のように条件を追加します。

*[
  _type == "event" &&
  date > now()
]{
  _id,
  name
}

上記で取得したデータに関して、JSON で取得するデータを加工したい場合はどうすればいいでしょうか？例えば以下のように更新します。

*[
  _type == "event" &&
  date > now()
]{
  _id,
  name,
  headline->{
    name
  },
  "isComing": true
}

headline や isComing に関しては元々のスキーマに持っていません。この GROQ を実行することで、結果として取得することができます。

まとめ

今回は GROQ を利用してデータを取得する方法を紹介しました。次回は Next.js のプロジェクトを作成して、GROQ を利用して取得したデータの処理を実行していきます。

Integration with Next.js