Playground を利用

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

Next.js との連携

前回は Sanity Studio の Vision を利用して、GROQ を利用したクエリーから必要となるコンテンツの取得ができました。今回は、Next.js から同様の処理を実行して Web のコンテンツとして利用する方法を紹介します。