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_image
和 buttons
的 Header
组件以及具有嵌套 clients
的 Clients
组件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,
},
},
我今天决定使用 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_image
和 buttons
的 Header
组件以及具有嵌套 clients
的 Clients
组件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,
},
},