komosyu

Strapiのリレーションでつまずいた

komosyu
Strapi

目次

  1. はじめに
  2. Strapi のリレーション
  3. 解決方法
  4. 参考
  5. さいごに

はじめに

Strapi で作成したデータを Next.js で取得する時に、リレーションしたデータの中で拾ってこれないものがあるな？と思ってつまずいてしまったので共有していきたいと思います！

Strapi のリレーション

取得できないリレーションデータというのは画像まわりのところですね。
今回の例では、contentsの作成者としてusers_permissions_userをリレーションしているのですが、ふつうに取得しようとしてもユーザーのアイコンのデータ

まず、ふつうに取得するときの例から見てみます。

const response = await axios.get(`http://localhost:1337/api/contents`)
console.log(response.data.data)

すると、こんな感じのデータを取得してくることができます。

type StrapiContent = {
  id: string
  attributes: {
    title: string
    content: string
    createdAt: string
    updatedAt: string
    publishedAt: string
  }
}[]

解決方法

お、やはりusers_permissions_userがついてこないですね。

公式ドキュメントを読んでみると、リレーションしたデータを取得してくる方法が書いてありますね。

データを取得してくる時にパラメーターとしてpopulateをつけてあげてhttp://localhost:1337/api/contents?populate****みたいな感じの設定をしてあげる必要があるそうです。

users_permissions_userを取得してくるためには、こんな感じの書き方になります。
http://localhost:1337/api/contents?populate=users_permissions_user
すると、狙い通りusers_permissions_userが取得できるようになりました！

type StrapiContent = {
  id: string
  attributes: {
    title: string
    content: string
    createdAt: string
    updatedAt: string
    publishedAt: string
    users_permissions_user: { data: [Object] }
  }
}[]

users_permissions_user: { data: [Object] }この中身はどうなっているのかというと

type UsersPermissionsUser = {
  id: number
  attributes: {
    username: string
    email: string
    provider: string
    confirmed: boolean
    blocked: boolean
    createdAt: string
    updatedAt: string
    biography: string
  }
}

こんな感じで一見取得できているように見えるのですが、肝心のユーザーのアイコン(画像)を取得してくることができていませんね。
users_permissions_userの持つiconというデータが必要だったので.つなぎでこんな感じで取得方法を変えていく必要があるのです。 http://localhost:1337/api/contents?populate=users_permissions_user.icon

すると、iconのデータを取得してくることができました！！

type UsersPermissionsUser = {
  id: number
  attributes: {
    username: string
    email: string
    provider: string
    confirmed: boolean
    blocked: boolean
    createdAt: string
    updatedAt: string
    biography: string
    icon: { data: [Object] }
  }
}

素晴らしいですね。
公式ドキュメントによると?populate=*ですべての第一階層のデータを取得してくることができるのですが、パフォーマンス的によろしくないみたいなので、今回紹介したように必要な情報のみ取得できるようにしていきましょう。

また、豆知識ですが、今回のようにユーザーのアイコンだけでなくサムネイルも欲しいな。といった感じで複数取得したい場合にはこんな感じの書き方をします。
http://localhost:1337/api/contents?populate=users_permissions_user.icon,thumbnail
,でつなぐだけでいいみたいです。

参考

さいごに

最近個人開発で Srapi を触る機会が多いのですが、海外のプロダクトなので日本語の情報が少なかったり実用例がわかりにくかったりするので、もっぱら ChatGPT に手伝ってもらっていますが…
オープンソースで使い勝手のいい HeadlessCMS だと思っているので、日本でもこれから使う人が増えていったらいいなーと思っています。