Жалобы на запросы GraphQL при создании страниц заметок DigitalGarden

Question

Жалобы на запросы GraphQL при создании страниц заметок DigitalGarden

Я пытаюсь научиться создавать Цифровые сады в GatsbyJS, разбираясь в работе веб-сайта Мэгги Эпплтон (maggieappleton.com), который, по-моему, потрясающий.

Заметки MDX отсортированы по разным папкам в зависимости от их характера (книги, эссе, иллюстрации или цифровые садовые заметки). Они находятся в content папка.

Общая структура папок такова:

      --content
  --books
  --notes
  [...]
--src
  --@aengusm
     --gatsby-theme-brain
       --components
         --BrainNote.js 
       --templates
         --Brain,js
  --components
  --fonts
  --lib
  --pages
  --stories
  --templates
    --bookTemplate.js
    --essayTemplate.js
    --illustrationTemplate.js
    --noteTemplate.js
    --paperTemplate.js

Насколько я понимаю: в, createPages сначала запрашивает содержимое обложки и заметки и генерирует страницу на основе определенного шаблона (находится в папке шаблонов).

Это работает для всех страниц, кроме заметок цифрового сада. В этом случае между заметками должны быть созданы двунаправленные ссылки, и здесь вступает в действие плагин gatsby-them-brain от Aengus McMillin.

Узлы создаются первыми onCreateNodeи используется плагином для создания структуры двунаправленных ссылок. Я не уверен, что понимаю, как создаются страницы заметок (я полагаю, через компонент MDXprovider в).

При запуске gatsby develop я сталкиваюсь со следующим:

      warn The GraphQL query in the non-page component
"[...]/maggieappleton.com/src/templates/noteTemplate.js" will not be  
run.
warn The GraphQL query in the non-page component "[..]/maggieappleton.com/node_modules/@aengusm/gatsby-theme-brain/src/templates/brain.js" will not be run.
Exported queries are only executed for Page components. It's possible you're
trying to create pages in your gatsby-node.js and that's failing for some
reason.

If the failing component(s) is a regular component and not intended to be a page
component, you generally want to use a <StaticQuery> (https://gatsbyjs.org/docs/static-query)
instead of exporting a page query.

If you're more experienced with GraphQL, you can also export GraphQL
fragments from components and compose the fragments in the Page component
query and pass data down into the child component — https://graphql.org/learn/queries/#fragments

gatsby develop работает правильно, но страницы заметок никогда не создаются.

В notesQueryin, похоже, работает, потому что плитки заметок правильно отображаются на главной странице и странице цифрового сада. Однако сами заметки не могут быть созданы в соответствии с логикой плагина и.

Должно быть что-то, что мне не хватает, любая помощь будет оценена!

Действия по воспроизведению:

Вилка с https://github.com/MaggieAppleton/maggieappleton.com
пряжа установить
Гэтсби разработать

Здесь gatsby-node.js содержание:

      const path = require('path')
const _ = require('lodash')

// const REDIRECT_SLUGS = ['slugs', 'in', 'here']

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

  //   REDIRECT_SLUGS.forEach(slug => {
  //     createRedirect({
  //       fromPath: `/${slug}`,
  //       toPath: `http://localhost:8001/${slug}`,
  //       redirectInBrowser: true,
  //       isPermanent: true,
  //     })
  //   })

  return graphql(`
    query {
      notesQuery: allMdx(
        filter: {
          frontmatter: { type: { eq: "note" }, published: { ne: false } }
        }
        sort: { order: DESC, fields: frontmatter___updated }
      ) {
        edges {
          node {
            id
            parent {
              ... on File {
                name
                sourceInstanceName
              }
            }
            excerpt(pruneLength: 250)
            fields {
              title
              slug
              updated
              growthStage
            }
          }
        }
      }

      essaysQuery: allMdx(
        filter: {
          frontmatter: { type: { eq: "essay" }, published: { ne: false } }
        }
        sort: { order: DESC, fields: frontmatter___updated }
      ) {
        edges {
          node {
            id
            parent {
              ... on File {
                name
                sourceInstanceName
              }
            }
            excerpt(pruneLength: 250)
            fields {
              title
              slug
              updated
            }
          }
        }
      }

      illustrationQuery: allMdx(
        filter: {
          frontmatter: {
            type: { eq: "illustration" }
            published: { ne: false }
          }
        }
        sort: { order: DESC, fields: frontmatter___updated }
      ) {
        edges {
          node {
            id
            parent {
              ... on File {
                name
                sourceInstanceName
              }
            }
            excerpt(pruneLength: 250)
            fields {
              title
              slug
              updated
            }
          }
        }
      }

      bookQuery: allMdx(
        filter: {
          frontmatter: { type: { eq: "book" }, published: { ne: false } }
        }
        sort: { order: DESC, fields: frontmatter___updated }
      ) {
        edges {
          node {
            id
            parent {
              ... on File {
                name
                sourceInstanceName
              }
            }
            excerpt(pruneLength: 250)
            fields {
              title
              slug
              updated
            }
          }
        }
      }

      paperQuery: allMdx(
        filter: {
          frontmatter: { type: { eq: "paper" }, published: { ne: false } }
        }
        sort: { order: DESC, fields: frontmatter___updated }
      ) {
        edges {
          node {
            id
            parent {
              ... on File {
                name
                sourceInstanceName
              }
            }
            excerpt(pruneLength: 250)
            fields {
              title
              slug
              updated
            }
          }
        }
      }
    }
  `).then(({ data, errors }) => {
    if (errors) {
      return Promise.reject(errors)
    }

    const pageRedirects = node => {
      if (node.fields.redirects) {
        node.fields.redirects.forEach(fromPath => {
          createRedirect({
            fromPath,
            toPath: node.fields.slug,
            redirectInBrowser: true,
            isPermanent: true,
          })
        })
      }
    }

    data.essaysQuery.edges.forEach(({ node }, i) => {
      const { edges } = data.essaysQuery
      const prevPage = i === 0 ? null : edges[i - 1].node
      const nextPage = i === edges.length - 1 ? null : edges[i + 1].node
      pageRedirects(node)
      createPage({
        path: node.fields.slug,
        component: path.resolve('./src/templates/essayTemplate.js'),
        context: {
          id: node.id,
          prevPage,
          nextPage,
        },
      })
    })

    data.illustrationQuery.edges.forEach(({ node }, i) => {
      const { edges } = data.illustrationQuery
      const prevPage = i === 0 ? null : edges[i - 1].node
      const nextPage = i === edges.length - 1 ? null : edges[i + 1].node

      pageRedirects(node)
      createPage({
        path: node.fields.slug,
        component: path.resolve('./src/templates/illustrationTemplate.js'),
        context: {
          id: node.id,
          prevPage,
          nextPage,
        },
      })
    })

    data.bookQuery.edges.forEach(({ node }, i) => {
      const { edges } = data.bookQuery
      const prevPage = i === 0 ? null : edges[i - 1].node
      const nextPage = i === edges.length - 1 ? null : edges[i + 1].node
      pageRedirects(node)
      createPage({
        path: node.fields.slug,
        component: path.resolve('./src/templates/bookTemplate.js'),
        context: {
          id: node.id,
          prevPage,
          nextPage,
        },
      })
    })

    data.paperQuery.edges.forEach(({ node }, i) => {
      const { edges } = data.paperQuery
      const prevPage = i === 0 ? null : edges[i - 1].node
      const nextPage = i === edges.length - 1 ? null : edges[i + 1].node
      pageRedirects(node)
      createPage({
        path: node.fields.slug,
        component: path.resolve('./src/templates/paperTemplate.js'),
        context: {
          id: node.id,
          prevPage,
          nextPage,
        },
      })
    })
  })
}

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      modules: [path.resolve(__dirname, 'src'), 'node_modules'],
      alias: {
        'react-dom': '@hot-loader/react-dom',
        $components: path.resolve(__dirname, 'src/components'),
      },
    },
  })
}

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions

  if (
    node.internal.type === `Mdx` &&
    !_.get(node, 'frontmatter.type', []).includes('note')
  ) {
    const parent = getNode(node.parent)
    if (_.isUndefined(parent.name)) {
      return
    }
    const titleSlugged = _.join(_.drop(parent.name.split('-'), 3), '-')
    const slug =
      parent.sourceInstanceName === 'legacy'
        ? `notes/${node.frontmatter.updated
            .split('T')[0]
            .replace(/-/g, '/')}/${titleSlugged}`
        : node.frontmatter.slug || titleSlugged

    createNodeField({
      name: 'id',
      node,
      value: node.id,
    })

    createNodeField({
      name: 'published',
      node,
      value: node.frontmatter.published,
    })

    createNodeField({
      name: 'title',
      node,
      value: node.frontmatter.title,
    })

    createNodeField({
      name: 'subtitle',
      node,
      value: node.frontmatter.subtitle,
    })

    createNodeField({
      name: 'description',
      node,
      value: node.frontmatter.description,
    })

    createNodeField({
      name: 'slug',
      node,
      value: slug,
    })

    createNodeField({
      name: 'url',
      node,
      value: node.frontmatter.url,
    })

    createNodeField({
      name: 'updated',
      node,
      value: node.frontmatter.updated
        ? node.frontmatter.updated.split(' ')[0]
        : '',
    })

    createNodeField({
      name: 'cover',
      node,
      value: node.frontmatter.cover,
    })

    createNodeField({
      name: 'type',
      node,
      value: node.frontmatter.type || [],
    })

    createNodeField({
      name: 'topics',
      node,
      value: node.frontmatter.topics || [],
    })

    createNodeField({
      name: 'redirects',
      node,
      value: node.frontmatter.redirects,
    })

    createNodeField({
      name: 'redirectTo',
      node,
      value: node.frontmatter.redirectTo,
    })

    createNodeField({
      name: 'isPost',
      node,
      value: true,
    })

    createNodeField({
      name: 'growthStage',
      node,
      value: node.frontmatter.growthStage,
    })
  }
}

BrainNote.js

      import React from 'react'
import { MDXProvider } from '@mdx-js/react'
import { useStaticQuery, graphql } from 'gatsby'
import 'tippy.js/animations/shift-away.css'
import Note from '../../../components/Note'
import components from '../../../components/mdx'
import { ReferenceBlock, ReferenceItem } from '../../../components/ReferenceBlock'


const BrainNote = ({ note }) => {

  //GraphQL Query
  const { site } = useStaticQuery(graphql`
    query BrainNoteStaticQuery {
      site {
        siteMetadata {
          title
          description
          author {
            name
          }
          keywords
        }
      }
    }
  `)

    //Declare the references array and the references block
  let references = []
  let referenceBlock

  // If the inbound note (eg. notes that point TO this note) is NOT null, map each inbound note's contents to a list item that links to the source and shows a preview of the HTML. This list item is assigned to the variable "references"
  //These are the notes that will show up in the references block
      // Turn this into a component
  if (note.inboundReferenceNotes != null) {
    references = note.inboundReferenceNotes.map(ref => (<ReferenceItem pageLink={ref.slug} pageTitle={ref.title} excerpt={ref.childMdx.excerpt} />))

    // If the number of inbound reference notes is longer than 0 list items, render a Reference Block.
    // Turn this into a component
    if (references.length > 0) {
      referenceBlock = <ReferenceBlock references={references} />
    }
  }

  // Declare a variable for Bidirectional Link Previews
  const bidirectionallinkpreviews = {}

  // If there are outbound reference notes (notes this note it pointing to), filter each note. Find the title, slug, and excerpt and map it to a preview component
   // Turn this into a component
  if (note.outboundReferenceNotes) {
    note.outboundReferenceNotes
      .filter(reference => !!reference.childMdx.excerpt)
      .forEach((ln, i) => {
        bidirectionallinkpreviews[ln.slug] = (
          <div style={{ padding: '1em 0.6em' }} id={ln.slug}>
            <h2 style={{ margin: '0 0 0.4em 0', fontSize: '1.66em' }}>{ln.title}</h2>
            <p>{ln.childMdx.excerpt}</p>
          </div>
        )
      })
  }

  // Decalre a variable called 'Tippy Link with Previews' and assign it to a function component. The function takes in props, and returns a standard MDX link component. It assigned the bidirectionallinkpreviews variable to a new bidirectionallinkpreviews props
  const TippyLinkWithPreviews = props => (
    <components.a
      {...props}
      bidirectionallinkpreviews={bidirectionallinkpreviews}
    />
  )

  return (
    <MDXProvider components={{...components, a: TippyLinkWithPreviews }}>
      <Note referenceBlock={referenceBlock} note={note} site={site} />
    </MDXProvider>
  )
}

export default BrainNote

Brain.js

      import React from 'react'
import { graphql } from 'gatsby'
import BrainNote from '../components/BrainNote'

export default props => {
  return <BrainNote note={props.data.brainNote} />
}

export const query = graphql`
  query BrainNoteWithRefsBySlug($slug: String!) {
    site {
      ...site
    }
    brainNote(slug: { eq: $slug }) {
      slug
      title
      childMdx {
        body
        frontmatter {
          title
          updated(formatString: "MMM DD, YYYY")
          startDate(formatString: "MMM DD, YYYY")
          slug
          topics
          growthStage
        }
      }
      inboundReferenceNotes {
        title
        slug
        childMdx {
          excerpt(pruneLength: 200)
        }
      }
      outboundReferenceNotes {
        title
        slug
        childMdx {
          excerpt(pruneLength: 280)
        }
      }
    }
  }
`

А также noteTemplate.js

      import React from 'react'
import { graphql } from 'gatsby'
import { MDXRenderer } from 'gatsby-plugin-mdx'
import SEO from 'components/SEO'
import { css } from '@emotion/core'
import Container from 'components/Container'
import Layout from '../components/Layout'
import { fonts } from '../lib/typography'
import Share from '../components/Share'
import config from '../../config/website'
import { useTheme } from 'components/Theming'
import { bpMaxSM } from '../lib/breakpoints'
import PreviousNext from '../components/PreviousNext'
// import { BacklinkItem, BacklinksSection } from '../components/BacklinksSection'

export default function Note({
  data: { site, mdx },
  pageContext: { prevPage, nextPage },
}) {
  const updated = mdx.frontmatter.updated
  const title = mdx.frontmatter.title
  // const topics = mdx.frontmatter.topics
  const growthStage = mdx.frontmatter.growthStage
  const theme = useTheme()

  return (
    <Layout site={site} frontmatter={mdx.frontmatter}>
      <SEO frontmatter={mdx.frontmatter} isNotePost />
      <Container
        css={css`
          max-width: 940px;
          margin-top: 3em;
          ${bpMaxSM} {
            margin-top: 0.8em;
          }
        `}
      >
        <div
          className="headerBlock"
          css={css`
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            max-width: 840px;
            margin: 0 auto;
        `}>
        <h1
          css={css`
            text-align: left;
            font-size: 3em;
            padding: 0 0 0.4em 0;
          `}
        >
          {title}
        </h1>
        <div
          css={css`
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 1em;
            h6 {
              margin: 0;
              border: 1px solid ${theme.colors.lightestGrey};
              text-align: center;
              align-self: center;
              font-family: ${fonts.regularSans}, 
              sans-serif;
              text-transform: capitalize;
              flex-grow: 1;
              padding: 0.4em 0.8em;
            }
            hr {
              margin: 0;
              background: ${theme.colors.lightestGrey};
              align-self: center;
              border: none;
              flex-grow: 50;
              ${bpMaxSM} {
              display: none;
              }
            }
          `}
        >
          {updated && <h6>Last tended on {updated}</h6>}
          {growthStage && <h6><span role="img" aria-label="a small Seedling">🌱</span> {growthStage}</h6>}

        <hr />
        </div>
        </div>
        <br />
        <MDXRenderer>{mdx.body}</MDXRenderer>
        {/* Next and Previous */}
        <PreviousNext
          prevSlug={prevPage && prevPage.fields.slug}
          prevTitle={prevPage && prevPage.fields.title}
          nextSlug={nextPage && nextPage.fields.slug}
          nextTitle={nextPage && nextPage.fields.title}
        />
        {/* Share Container */}
        <Share
          url={`${config.siteUrl}/${mdx.frontmatter.slug}/`}
          title={title}
          twitterHandle={config.twitterHandle}
        />
      </Container>
      {/* <SubscribeForm /> */}
    </Layout>
  )
}

export const pageQuery = graphql`
  query($id: String!) {
    site {
      ...site
    }
    mdx(fields: { id: { eq: $id } }) {
      frontmatter {
        title
        updated(formatString: "MMMM DD, YYYY")
        slug
        topics
        growthStage
      }
      body
    }
  }
`

0

javascript graphql gatsby gatsby-plugin gatsby-plugin-mdx

Источник

10 апр '21 в 14:56

1 ответ

Другие вопросы по тегам javascript graphql gatsby gatsby-plugin gatsby-plugin-mdx

user5585371 10 апр '21 в 16:57 2021-04-10 16:57 · Answer 1 · 2021-04-10 16:57

Я не уверен, что полностью понимаю вашу проблему, но мне кажется, что вы не связываете свой шаблон с шаблоном, как вы делаете с остальными шаблонами. С Note запрашивает не допускающий значение NULL idв запросе GraphQL он вызывает вашу проблему. Просто добавьте это в свой gatsby-node.js:

      data.notesQuery.edges.forEach(({ node }, i) => {
  // uncomment the following if needed

  //const { edges } = data.notesQuery
  //const prevPage = i === 0 ? null : edges[i - 1].node
  //const nextPage = i === edges.length - 1 ? null : edges[i + 1].node
  //pageRedirects(node)
  createPage({
    path: node.fields.slug,
    component: path.resolve('./src/templates/noteTemplate.js'),
    context: {
      id: node.id,
    },
  })
})