如何在Next.js应用中通过Directus API获取并展示关联数据？

方案一：一次性获取Concept及其关联数据（推荐） #

Directus支持嵌套关联查询，你可以在请求Concept数据时直接包含关联的Definitionc和Definitionl集合，无需分开请求。修改你的Concept查询代码：

// Fetching Concept + related Definitionc/Definitionl data
const { data: conceptData, error: conceptError } = useSWR(
  slug
    ? `http://0.0.0.0:8055/items/Concept?filter[concept_slug][_eq]=${slug}&fields=id,concept_title,concept_categorie.categorie_title,definitionc.*,definitionl.*`
    : null,
  conditionalFetcher
);

• 关键说明：definitionc.* 和 definitionl.* 是Directus自动生成的反向关系字段名（对应Definitionc、Definitionl表指向Concept的外键关系），如果你的Directus后台自定义了关系字段名，替换成实际名称即可。
• 使用时，直接从conceptData?.data[0].definitionc和conceptData?.data[0].definitionl获取关联数据。

方案二：分开请求关联数据（如果需要独立请求） #

如果你需要单独获取Definitionc和Definitionl数据，修正你的请求逻辑，确保API格式正确并携带令牌：

修正请求实现 #

// 通用Directus请求工具函数
async function directusFetcher(url) {
  const response = await fetch(url, {
    headers: {
      'Authorization': `Bearer ${process.env.NEXT_PUBLIC_DIRECTUS_API_TOKEN}` // 从环境变量读取令牌
    }
  });

  if (!response.ok) {
    throw new Error(`API请求失败：${response.status} ${response.statusText}`);
  }

  const result = await response.json();
  return result.data;
}

// 获取Definitionc数据
const { data: definitionsCData, error: definitionsCError } = useSWR(
  slug ? `http://0.0.0.0:8055/items/Definitionc?filter[concept.concept_slug][_eq]=${slug}&fields=*` : null,
  directusFetcher
);

// 获取Definitionl数据
const { data: definitionsLData, error: definitionsLError } = useSWR(
  slug ? `http://0.0.0.0:8055/items/Definitionl?filter[concept.concept_slug][_eq]=${slug}&fields=*` : null,
  directusFetcher
);

• 关键修正：通过concept.concept_slug[_eq]=${slug}利用Directus的关联字段过滤能力，同时确保请求携带正确的API令牌。

问题排查要点 #

1. 验证关系配置：在Directus后台确认Definitionc、Definitionl表的外键字段已正确关联到Concept表，且反向关系已启用。
2. 测试API请求：直接在Postman或浏览器中测试API链接（携带令牌）：
   • 403错误：确认API令牌对应的角色有Definitionc、Definitionl表的读取权限，且能访问关联的Concept字段。
   • 400错误：检查filter参数格式是否正确，关联字段名是否匹配Directus中的配置。
3. 检查权限设置：确保Directus中Concept、Definitionc、Definitionl表的读取权限已开放给当前API令牌对应的角色。

内容的提问来源于stack exchange，提问作者Tryna Code