Gatsby:如何将多个上下文 ID 传递给单个查询?

Posted

技术标签:

【中文标题】Gatsby:如何将多个上下文 ID 传递给单个查询?【英文标题】:Gatsby: How can I pass multiple context IDs to a single query? 【发布时间】:2021-08-21 05:19:58 【问题描述】:

我正在尝试使用它们的 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 

我没有找到自己做错了什么。

【问题讨论】:

【参考方案1】:

您的gatsby-node.js 看起来很完美。您的问题是由您发送到模板 (videoDetailTemplate) 的数据上下文的类型引起的。你告诉 GraphQL ideditorId 都是 ID 类型,而我猜它们应该是字符串。

我猜想改变这一行:

  query($id: ID!, $editorId: ID!) 

这应该可以解决问题:

  query($id: String!, $editorId: String!) 

从GraphQL types definition docs可以看到:

ID 标量类型表示唯一标识符,通常用于 重新获取对象或作为缓存的键。 ID类型是序列化的 与字符串相同;但是,将其定义为 ID 表示 它不适合人类阅读。

注意:找出 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",
      ,
    ,
  ],

此外,您应该能够在通过上下文发送时使用parseIntNumberString 等方法强制类型。

然后按照文档建议使用where 过滤器:

editorDetailPage(where:  id: $editorId)

videoDetailPage (where:  id: $id)

您能否提供有关您的实施(插件、配置、版本等)的更多详细信息?这似乎是一个错误:

资源:

指南 https://www.gatsbyjs.com/docs/glossary/wpgraphql/ https://www.gatsbyjs.com/plugins/gatsby-source-graphql/ 问题 https://github.com/wp-graphql/wp-graphql/issues/1524 https://github.com/wp-graphql/wp-graphql/issues/532 https://github.com/wp-graphql/wp-graphql/issues/109 https://github.com/wp-graphql/wp-graphql/issues/997

【讨论】:

这样做我得到Variable "$id" of type "String!" used in position expecting type "ID!".Variable "$editorId" of type "String!" used in position expecting type "ID!". 您是否在某处设置类型?您是否尝试过删除表示该字段不可为空的感叹号(! 没有。 GraphiQL IDE 将其视为字符串,但 GQL 需要一个 ID。 ``` 查询 MyQuery videoDetailPage(id: "515", idType: DATABASE_ID) videoDetail 客户端导演持续时间编辑器 editorId productionCompany title videoStill altText sourceUrl videoUrl editorDetailPage(id: "194", idType: DATABASE_ID) editorDetail editorVideos pagePath image altText sourceUrl title ``` 应该是的,我们的想法是避免评论部分出现垃圾邮件并尝试不同的方法来解决您的问题。如果您尝试删除不可为空的字段并且问题消失了,我们会检测到原因,以便我们尝试修复它。现在我们瞎了。这就是为什么我要求尝试将其设置为可为空。 它需要一个不可为空的变量。 Variable "$editorId" of type "ID" used in position expecting type "ID!".Variable "$editorId" of type "String" used in position expecting type "ID!". 我已将gatsby info 的内容添加到原帖中。【参考方案2】:

解决了。需要对 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
              
            
          
        
      
    
  
`;

【讨论】:

以上是关于Gatsby:如何将多个上下文 ID 传递给单个查询?的主要内容,如果未能解决你的问题,请参考以下文章

如何将多个值传递给存储过程中的单个参数

Gatsby 和 WordPress graphQL:按 id 查询多个图像

如何将 ManagedObjectID 传递给主线程

在 Gatsby 中,如何将相对路径文件传递给同时拉取查询的模板?

Informix:如何将单个参数中的多个值传递、使用和执行到存储过程

单个 GraphQL 查询中的多个源 (Gatsby)