Strapi api 响应中未包含的组件

Components not included in Strapi api response

我今天决定使用 Strapi 作为我的作品集的无头 CMS,但我遇到了一些问题,我似乎无法在线找到解决方案。也许我只是太笨了,无法真正找到真正的问题。

我已经为我的项目设置了一个模式,该模式将存储在 Strapi 中(一切都在网络中完成),但我的自定义组件存在一些问题,也就是说,它们不是 Strapi 的一部分API 当我通过 Postman 运行 回复时。 (不仅是空键,而且根本不包含在响应中)。所有其他不是组件的字段都按预期填写。

起初我认为这可能与权限有关,但一切都已启用所以不可能,我也尝试查看代码中的 API,但记录答案也没有包含组件。

这是模式中一些字段的图像,但更重要的是未包含在响应中的组件。

所以我的问题是,我是否需要在项目中创建某种解析器或任何东西才能包含这些字段,或者为什么不包含它们?

我遇到了同样的问题,并且能够通过将 populate=* 添加到 API 端点的末尾来解决它。

例如:

http://localhost:1337/api/test?populate=*

更多信息在这里:https://forum.strapi.io/t/cannot-see-media-field-in-my-endpoint-for-my-content-type/13082/2

编辑: 只有一级关系使用 populate=* 填充。使用 LHS 括号语法(即 [populate]=*)更深地填充:

例如:

http://localhost:1337/api/test?populate[TestExamples][populate]=*

如果您转到关系人口,请在此处获取更多信息:https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest-api.html#fields-selection

只是添加到已接受的答案中,如果您正在使用大量嵌套 collection 或嵌套组件(例如,在单一类型中使用大量自定义组件),那么它可能是值得的编写自定义控制器。

我需要呈现一个主页,其中有一个 'Header' 组件,而页眉有两个可重复的嵌套 'Button' 组件。此外,我想渲染 collection of 'Clients' 这是一个 one-to-many 关系。

由于这个数据结构不会经常改变,我刚刚编写了一个自定义控制器,所以我不必在 front-end.

中担心这个

假设您创建了一个主页单一类型来呈现您的主页,控制器将在以下目录中可用:/src/api/homepage/controllers/homepage.js

在下面的示例中,我想渲染具有嵌套 header_imagebuttonsHeader 组件以及具有嵌套 clientsClients 组件collection.

const { createCoreController } = require('@strapi/strapi').factories;

module.exports = createCoreController('api::homepage.homepage', ({ strapi }) => ({
    async find(ctx) {
        const populateList = [
            'Header.header_image',
            'Header.buttons',
            'Clients.clients'
        ]
        // Push any additional query params to the array
        populateList.push(ctx.query.populate)
        ctx.query.populate = populateList.join(',')

        const content = await super.find(ctx)
        return content
    }
}));

Strapi V3 和 V4 之间似乎存在显着差异,我发现有关填充嵌套组件的文档对于 V4 来说非常差。我想这将在接下来的几周内更新,因为 Strapi V4 刚刚发布。

如果有更好的方法来填充深层嵌套的组件或关系,我很想听听,但我希望以上内容同时也能帮助到一些人。

我对 Strapi 比较陌生,尤其是 V4。我去年只开发了一个版本为 3.6.8 的应用程序。除非您还没有发现问题,否则我相信我已在端点调用中解决了该问题。我还必须说我还没有部署它。只是在开发环境中。

The data architecture

端点调用:

http://localhost:1337/api/profiles/?filters[user]=1&populate[0]=permissions&populate1=permissions.forms.form&populate2=permissions.quiz&populate[3]=permissions.unity&populate[4]=permissions.forms.form.Questions Blockquote

The Endpoint Call

Gatsbyjs 解决方案!!!:我使用的是单一类型,我在该单一类型中有一个组件,例如 header 设置,用户可以在其中填写诸如phone 号码位置等等......我也在我的 front-end 和这里使用 Gatsbyjs strapi.js Screenshot is a solution for that too.gatsby-config.js Screenshot 以防万一有人遇到同样的问题

对于使用 Angular 的人来说,创建正确的嵌套 QueryParams 以与 HttpClient 一起使用可能会很烦人,所以我创建了这个 DeepQuery class(此处为gist,以防出现问题):

class DeepQuery {
  constructor(public query: any) {

  }

  private isObj(obj: any): boolean {
    return (
      typeof obj === 'object' &&
      obj !== null
    )
  }

  private toQPK(crumbs: string[]): string {
    if (crumbs.length == 0) {
      throw new Error(`Parameter without key`)
    }
    return crumbs[0] + crumbs.slice(1).map(s => `[${s}]`).join("");
  }

  private parse(obj: any, crumbs: string[] = [], memo: {[key: string]: any} = {}) {
    if (!this.isObj(obj)) {
      memo[this.toQPK(crumbs)] = obj;
    } else if (Array.isArray(obj)) {
      for (let i = 0; i < obj.length; i++) {
        crumbs.push(i.toString());
        this.parse(obj[i], crumbs, memo);
        crumbs.pop();
      }
    } else {
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          crumbs.push(key);
          this.parse(obj[key], crumbs, memo)
          crumbs.pop();
        }
      }
    }
    return memo;
  }

  public encode() {
    return this.parse(this.query);
  }
}

encode 方法创建一个对象,您可以将其传递给您进行的任何 HTTP 调用:

makeCall(type: string): Observable<any> {
    let populate = {
        authors: ["listing", "publisher"]
    };
    let params = new DeepQuery({populate});
    return this.html.get<any>(url.href, params.encode());
  }

我发现这个带有 Strapi 插件的解决方案能够获取使用 Strapi 创建的自定义组件中的 collectionTypes 的数据。

为了明确我的情况是这个,我有一个名为“article”的 collectionType,它包含在一个自定义组件中,显然我们需要深入研究才能获取它们。

这是我使用 strapi 插件的解决方案 gatsby-source-strapi

{
  resolve: "gatsby-source-strapi",
  options: {
    apiURL:
      process.env.NODE_ENV === "production"
        ? process.env.API_URL
        : "http://localhost:1337/api",
    accessToken: process.env.STRAPI_TOKEN,
    collectionTypes: [
      { name: `descrizioni-home-page` },
      { name: "article", endpoint: "articles?populate=*" },
    ],
    singleTypes: [{ name: "homepage", endpoint: "homepage?populate=*" }],
    queryLimit: 5000,
  },
},