盖茨比：如何将多个上下文 ID 传递给单个查询？
Gatsby: How can I pass multiple context IDs to a single query?
我正在尝试使用它们的 WordPress ID 在单个查询中从两个单独的对象获取数据，但我得到 GraphQLError: The ID input is invalid. Make sure you set the proper idType for your input. 在 WordPress 中使用 GraphQL IDE 它获取所有数据正如预期的那样，但我在我的代码中遇到了这个错误。例如，如果我将 idType 设置为字符串，我会得到 Variable "$editorId" of type "String!" used in position expecting type "ID!".
gatsby-node.js > createPages 函数：
// Video Detail pages
const {
data: {
cartel: { videoDetailPages },
},
} = await graphql(`
query {
cartel {
videoDetailPages(first: 300) {
nodes {
id
slug
videoDetail {
editor
editorId
}
}
}
}
}
`);
const videoDetailTemplate = path.resolve(`./src/templates/videoDetail.js`);
videoDetailPages.nodes.forEach(page => {
const editorSlug = page.videoDetail.editor.replace(' ', '-').toLowerCase();
const { editorId } = page.videoDetail;
createPage({
// will be the url for the page
path: `${editorSlug}/${page.slug}`,
// specify the component template of your choice
component: slash(videoDetailTemplate),
// In the ^template's GraphQL query, 'id' will be available
// as a GraphQL variable to query for this page's data.
context: {
id: page.id,
editorId,
},
});
});
页面模板查询：
export const query = graphql`
query($id: ID!, $editorId: ID!) {
cartel {
videoDetailPage(id: $id) {
videoDetail {
client
director
duration
editor
productionCompany
videoStill {
altText
sourceUrl
}
videoUrl
title
}
}
}
cartel {
editorDetailPage(id: $editorId) {
editorDetail {
editorVideos {
pagePath
image {
altText
sourceUrl
title
}
}
}
}
}
}
`;
盖茨比信息：
System:
OS: macOS 10.15.7
CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 10.23.0 - ~/.nvm/versions/node/v10.23.0/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.8 - ~/.nvm/versions/node/v10.23.0/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 91.0.4472.77
Firefox: 87.0
Safari: 14.1
npmPackages:
gatsby: ^2.24.36 => 2.32.13
gatsby-image: ^2.4.14 => 2.11.0
gatsby-plugin-accessibilityjs: ^1.0.3 => 1.0.3
gatsby-plugin-google-tagmanager: ^2.3.11 => 2.11.0
gatsby-plugin-manifest: ^2.4.22 => 2.12.1
gatsby-plugin-offline: ^2.2.7 => 2.2.10
gatsby-plugin-react-helmet: ^3.3.10 => 3.10.0
gatsby-plugin-remove-trailing-slashes: ^2.3.11 => 2.10.0
gatsby-plugin-sass: ^2.3.12 => 2.8.0
gatsby-plugin-sharp: ^2.6.25 => 2.14.4
gatsby-plugin-sitemap: ^2.4.11 => 2.12.0
gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
gatsby-source-filesystem: ^2.3.24 => 2.11.1
gatsby-source-graphql: ^3.4.0 => 3.4.0
gatsby-transformer-sharp: ^2.5.12 => 2.12.1
我没有找到我做错了什么。
你的 gatsby-node.js 看起来很完美。您的问题是由您发送到模板的数据上下文类型引起的 (videoDetailTemplate)。您告诉 GraphQL id 和 editorId 都是 ID 类型，而我猜它们应该是字符串。
我想改变这一行：
query($id: ID!, $editorId: ID!) {
为此应该可以解决问题：
query($id: String!, $editorId: String!) {
从GraphQL types definition docs可以看出：
The ID scalar type represents a unique identifier, often used to
refetch an object or as the key for a cache. The ID type is serialized
in the same way as a String; however, defining it as an ID signifies
that it is not intended to be human‐readable.
注意：找出 String 和 ID 类型之间的区别（“将其定义为 ID 表示它不是人类可读的”）
您应该能够在插件设置中为每个字段配置类型：
module.exports = {
plugins: [
{
resolve: "gatsby-source-graphql",
options: {
// Remote schema query type. This is an arbitrary name.
typeName: "WPGraphQL",
// Field name under which it will be available. Used in your Gatsby query. This is also an arbitrary name.
fieldName: "wpcontent",
// GraphQL endpoint, relative to your WordPress home URL.
url: "https://example.com/blog/graphql",
},
},
],
}
此外，您应该能够在通过上下文发送它时使用 parseInt, Number, String 等方法强制类型。
然后按照文档的建议使用 where 过滤器：
editorDetailPage(where: { id: $editorId})
videoDetailPage (where: { id: $id})
您能否提供有关实施的更多详细信息（插件、配置、版本等）？这似乎是一个错误：
资源：
- 指南
- 问题
整理好了。需要在 editorDetailPages 列表上使用 where 查询。非常感谢 Ferran Buireu 为我指明了正确的方向。
gatsby-node.js > createPages 函数：
// Video Detail pages
const {
data: {
cartel: { videoDetailPages },
},
} = await graphql(`
query {
cartel {
videoDetailPages(first: 300) {
nodes {
id
slug
videoDetail {
editor
editorId
}
}
}
}
}
`);
const videoDetailTemplate = path.resolve(`./src/templates/videoDetail.js`);
videoDetailPages.nodes.forEach(page => {
const editorSlug = page.videoDetail.editor.replace(' ', '-').toLowerCase();
const { editorId } = page.videoDetail;
createPage({
// will be the url for the page
path: `${editorSlug}/${page.slug}`,
// specify the component template of your choice
component: slash(videoDetailTemplate),
// In the ^template's GraphQL query, 'id' will be available
// as a GraphQL variable to query for this page's data.
context: {
id: page.id,
editorId: parseInt(editorId, 10),
},
});
});
页面模板查询：
export const query = graphql`
query($id: ID!, $editorId: Int!) {
cartel {
videoDetailPage(id: $id) {
videoDetail {
client
director
duration
editor
productionCompany
videoStill {
altText
sourceUrl
}
videoUrl
title
}
}
}
cartel {
editorDetailPages(where: { id: $editorId }) {
nodes {
editorDetail {
editorVideos {
pagePath
image {
altText
sourceUrl
title
}
}
}
}
}
}
}
`;
我正在尝试使用它们的 WordPress ID 在单个查询中从两个单独的对象获取数据，但我得到 GraphQLError: The ID input is invalid. Make sure you set the proper idType for your input. 在 WordPress 中使用 GraphQL IDE 它获取所有数据正如预期的那样，但我在我的代码中遇到了这个错误。例如，如果我将 idType 设置为字符串，我会得到 Variable "$editorId" of type "String!" used in position expecting type "ID!".
gatsby-node.js > createPages 函数：
// Video Detail pages
const {
data: {
cartel: { videoDetailPages },
},
} = await graphql(`
query {
cartel {
videoDetailPages(first: 300) {
nodes {
id
slug
videoDetail {
editor
editorId
}
}
}
}
}
`);
const videoDetailTemplate = path.resolve(`./src/templates/videoDetail.js`);
videoDetailPages.nodes.forEach(page => {
const editorSlug = page.videoDetail.editor.replace(' ', '-').toLowerCase();
const { editorId } = page.videoDetail;
createPage({
// will be the url for the page
path: `${editorSlug}/${page.slug}`,
// specify the component template of your choice
component: slash(videoDetailTemplate),
// In the ^template's GraphQL query, 'id' will be available
// as a GraphQL variable to query for this page's data.
context: {
id: page.id,
editorId,
},
});
});
页面模板查询：
export const query = graphql`
query($id: ID!, $editorId: ID!) {
cartel {
videoDetailPage(id: $id) {
videoDetail {
client
director
duration
editor
productionCompany
videoStill {
altText
sourceUrl
}
videoUrl
title
}
}
}
cartel {
editorDetailPage(id: $editorId) {
editorDetail {
editorVideos {
pagePath
image {
altText
sourceUrl
title
}
}
}
}
}
}
`;
盖茨比信息：
System:
OS: macOS 10.15.7
CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 10.23.0 - ~/.nvm/versions/node/v10.23.0/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.8 - ~/.nvm/versions/node/v10.23.0/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 91.0.4472.77
Firefox: 87.0
Safari: 14.1
npmPackages:
gatsby: ^2.24.36 => 2.32.13
gatsby-image: ^2.4.14 => 2.11.0
gatsby-plugin-accessibilityjs: ^1.0.3 => 1.0.3
gatsby-plugin-google-tagmanager: ^2.3.11 => 2.11.0
gatsby-plugin-manifest: ^2.4.22 => 2.12.1
gatsby-plugin-offline: ^2.2.7 => 2.2.10
gatsby-plugin-react-helmet: ^3.3.10 => 3.10.0
gatsby-plugin-remove-trailing-slashes: ^2.3.11 => 2.10.0
gatsby-plugin-sass: ^2.3.12 => 2.8.0
gatsby-plugin-sharp: ^2.6.25 => 2.14.4
gatsby-plugin-sitemap: ^2.4.11 => 2.12.0
gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
gatsby-source-filesystem: ^2.3.24 => 2.11.1
gatsby-source-graphql: ^3.4.0 => 3.4.0
gatsby-transformer-sharp: ^2.5.12 => 2.12.1
我没有找到我做错了什么。
你的 gatsby-node.js 看起来很完美。您的问题是由您发送到模板的数据上下文类型引起的 (videoDetailTemplate)。您告诉 GraphQL id 和 editorId 都是 ID 类型，而我猜它们应该是字符串。
我想改变这一行：
query($id: ID!, $editorId: ID!) {
为此应该可以解决问题：
query($id: String!, $editorId: String!) {
从GraphQL types definition docs可以看出：
The
IDscalar type represents a unique identifier, often used to refetch an object or as the key for a cache. The ID type is serialized in the same way as a String; however, defining it as anIDsignifies that it is not intended to be human‐readable.
注意：找出 String 和 ID 类型之间的区别（“将其定义为 ID 表示它不是人类可读的”）
您应该能够在插件设置中为每个字段配置类型：
module.exports = {
plugins: [
{
resolve: "gatsby-source-graphql",
options: {
// Remote schema query type. This is an arbitrary name.
typeName: "WPGraphQL",
// Field name under which it will be available. Used in your Gatsby query. This is also an arbitrary name.
fieldName: "wpcontent",
// GraphQL endpoint, relative to your WordPress home URL.
url: "https://example.com/blog/graphql",
},
},
],
}
此外，您应该能够在通过上下文发送它时使用 parseInt, Number, String 等方法强制类型。
然后按照文档的建议使用 where 过滤器：
editorDetailPage(where: { id: $editorId})
videoDetailPage (where: { id: $id})
您能否提供有关实施的更多详细信息（插件、配置、版本等）？这似乎是一个错误：
资源：
- 指南
- 问题
整理好了。需要在 editorDetailPages 列表上使用 where 查询。非常感谢 Ferran Buireu 为我指明了正确的方向。
gatsby-node.js > createPages 函数：
// Video Detail pages
const {
data: {
cartel: { videoDetailPages },
},
} = await graphql(`
query {
cartel {
videoDetailPages(first: 300) {
nodes {
id
slug
videoDetail {
editor
editorId
}
}
}
}
}
`);
const videoDetailTemplate = path.resolve(`./src/templates/videoDetail.js`);
videoDetailPages.nodes.forEach(page => {
const editorSlug = page.videoDetail.editor.replace(' ', '-').toLowerCase();
const { editorId } = page.videoDetail;
createPage({
// will be the url for the page
path: `${editorSlug}/${page.slug}`,
// specify the component template of your choice
component: slash(videoDetailTemplate),
// In the ^template's GraphQL query, 'id' will be available
// as a GraphQL variable to query for this page's data.
context: {
id: page.id,
editorId: parseInt(editorId, 10),
},
});
});
页面模板查询：
export const query = graphql`
query($id: ID!, $editorId: Int!) {
cartel {
videoDetailPage(id: $id) {
videoDetail {
client
director
duration
editor
productionCompany
videoStill {
altText
sourceUrl
}
videoUrl
title
}
}
}
cartel {
editorDetailPages(where: { id: $editorId }) {
nodes {
editorDetail {
editorVideos {
pagePath
image {
altText
sourceUrl
title
}
}
}
}
}
}
}
`;