错误 您的 GraphQL 查询中出现错误：所需类型为“String！”的变量“$slug”没有提供

Question

上面的标题是错误信息，下面是代码。 我在学习 Gatsby 的教程时遇到了这个问题。我想知道是否有人知道发生了什么，并且可以给我一些关于发生了什么的想法。我不知道发生了什么。对不起……

import React from 'react'
import { graphql } from 'gatsby'
import Layout from '../components/layout'
import { parseImageUrl } from '@conradlin/notabase/src/utils'


export default ({ data }) => {
  const { posts: { title, tags, publish_date, html, url, slug, desc, color, cover_image } } = data

  return (
    <Layout>
      <div id = "main">
        <div>{tags && tags.join(', ')}</div> 
        <h1>{title}</h1>
        <div dangerouslySetInnerHTML={{ __html: html }} />
      </div>
    </Layout>
  )
}

export const query = graphql`
  query($slug: String!) {
    posts(slug: { eq: $slug }) {
      html
      title
      tags
      publish_date{
        startDate(formatString: "YYYY-MMM-DD", fromNow: false)
      }
      url
      desc
      color
      cover_image
    }
  }

教程在这里供参考 https://conradlin.com/blog/posts/host-gatsbyjs-blog-with-notion-cms-and-netlify-for-free

这应该是查询代码

const path = require(`path`)

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  const blogPost = await graphql(`
  query {
      allPosts(filter: {status: {eq: "published"}, content_type: {eq: "article"}}) {
          nodes {
            slug
            url
          }
        }
      }
    `).then(result => {
      if (result.errors) {
        Promise.reject(result.errors);
      }
      
      result.data.allPosts.nodes.forEach(({ slug, url }) => {
        createPage({
            path: `blog/posts/${url}`,
            component: path.resolve(`./src/templates/blogPost.js`),
            context: {
                // Data passed to context is available
                // in page queries as GraphQL variables.
                slug: slug,
            },
        });
    });
  });
  const newsPost = await graphql(`
  query {
      allPosts(filter: {status: {eq: "published"}, content_type: {eq: "newsletter"}}) {
          nodes {
            slug
            url
          }
        }
      }
    `).then(result => {
      if (result.errors) {
        Promise.reject(result.errors);
      }
      
      result.data.allPosts.nodes.forEach(({ slug, url }) => {
        createPage({
            path: `subscribe/posts/${url}`,
            component: path.resolve(`./src/templates/blogPost.js`),
            context: {
                // Data passed to context is available
                // in page queries as GraphQL variables.
                slug: slug,
            },
        });
    });
  });

  return Promise.all([blogPost, newsPost]);
};

Answer 1

如果你看：

  result.data.allPosts.nodes.forEach(({ slug, url }) => {
    createPage({
        path: `subscribe/posts/${url}`,
        component: path.resolve(`./src/templates/blogPost.js`),
        context: {
            // Data passed to context is available
            // in page queries as GraphQL variables.
            slug: slug,
        },
    });

此 sn-p 指的是 gatsby-node.js，您可以在其中根据 allPosts 的 GraphQL 查询动态创建页面。在这种情况下，您将创建具有以下 URL 的每个帖子：

path: `subscribe/posts/${url}`,

但是，要过滤每个特定帖子的数据，您需要传递给模板（使用component: path.resolve('./src/templates/blogPost.js') 设置）您需要传递一个标识符字段，通常是id、slug 或其他一些唯一的价值。数据流是由上下文完成的，您可以在上下文中告知将什么参数传递给组件模板，在这种情况下是 slug：

context: {
    // Data passed to context is available
    // in page queries as GraphQL variables.
    slug: slug,
},

因此，您可以在模板中执行以下操作：

export const query = graphql`
  query($slug: String!) {
    posts(slug: { eq: $slug }) {
      html
      title
      tags
      publish_date{
        startDate(formatString: "YYYY-MMM-DD", fromNow: false)
      }
      url
      desc
      color
      cover_image
    }
  }

注意($slug: String!) 感叹号 (!) 表示该字段对于 GraphQL 查询不可为空，或者换句话说，这是必需的。您的代码正在中断，因为在您的 GraphQL 查询中的某处（在您的 gatsby-node.js 中）您将一个空 /null 值传递给该模板并且查询中断。

调试该查询中发生的事情或通过以下方式删除不可为空的参数：

query($slug: String)

但是，这将绕过代码破坏，但由于您提供的是空值，因此问题将持续存在。