How to set sub route titles about gatsby-plugin-breadcrumb

[muuvmuuv]

AH! There is a typo! In the README you say updateCrumbLabels not crumbLabelUpdates 😄 now it works like a charm, many thanks for your time. Awesome work!

[TheFirstMe]

AH! There is a typo! In the README you say updateCrumbLabels not crumbLabelUpdates 😄 now it works like a charm, many thanks for your time. Awesome work!

Thanks I was also stuck with this lol.

[sbardian]

@muuvmuuv I also have the <Breadcrumb /> component in my layout, and on each page (page template/etc) using the layout, I pass props to the layout that I then pass to the <Breadcrumb /> component within the layout component. See the Click Tracking Layout example (https://github.com/sbardian/gatsby-plugin-breadcrumb#click-tracking-layout-component-example). Instead of passing a location prop, you would pass a crumbs and crumbLabel prop.

You can also look at my books project for an example of doing this:

• page template (https://github.com/sbardian/books/blob/0cee5e392b0ea2b9d258c6416bb8e5df2280a402/src/templates/book-page.js#L25)
• layout (https://github.com/sbardian/books/blob/0cee5e392b0ea2b9d258c6416bb8e5df2280a402/src/components/layout.js#L117)

[TheFirstMe]

@sbardian Ah I forgot that static queries has that issue. Passing props works so that should do it for now 😃

[muuvmuuv]

@TheFirstMe I had issues with that method and SSR, so I'm using a global context to pass information between pages/page templates and the breadcrumb.

src/store/history.js: https://pastebin.com/ZJChZVyg
src/layouts/Index.jsx: https://pastebin.com/YAJcqhXG
src/components/Breadcrumb.jsx: https://pastebin.com/q2fm44LB (included in <Header />
src/pages/index.jsx: https://pastebin.com/iFaVAk3D

Hope that helps you. In combination with the crumbLabelUpdates it is now looking good and is fast.

@sbardian but still I think there is no need to set the crumbLabel by our self. This plugin could easily look into each pageContext on build time and look for a prop title to set the crumbLabel by that instead of the location name.

Anyway that is kind of the reason where I don't like React, it's such a hacking to do a simple thing like breadcrumb. It is really sad that Gatsby does not support a global history based on a router file, like you would do e.g. in an Angular application to specify routes + with support for multilingual. Hope @reach/router will add something like that in the future.

[sbardian]

@muuvmuuv I think early on I tried using FrontMatter for this, but this plugin uses onCreatePages API to update the page context. I think the issue was I was not able to perform graphql queries in onCreatePages API to pull the data (tbh I don't remember for sure, but I did look at FrontMatter early on).

Is there a big difference in providing the "title" via a prop on each page vs having to provide it via FrontMatter data on each/for each page?

If it makes gatsby-plugin-breadcrumb API easier to use, doesn't require other plugins, and can be pulled off in onCreatePages I'm willing to look into it!

Edit: Feel free to open a new issue/PR if you want, then we have somewhere to track/etc.

[sbardian]

Sure, just seems we are trying to solve for one specific case, that being that you are using the gatsby-plugin-layout plugin. This would be a none issue for everyone not using that plugin.

[sbardian]

thanks for the issue @muuvmuuv let me do some checking into this and get back to you!

[sbardian]

🎉 This issue has been resolved in version 6.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[sbardian]

@muuvmuuv see Readme (https://github.com/sbardian/gatsby-plugin-breadcrumb#autogen-example) and checkout the new plugin option updateCrumbLabels

[muuvmuuv]

Does not work for me somehow:

    {
      resolve: `gatsby-plugin-breadcrumb`,
      options: {
        useAutoGen: true,
        useClassNames: true,
        exclude: [`/404`],
        updateCrumbLabels: [
          {
            pathname: '/projects',
            crumbLabel: 'Projects',
          },
          {
            pathname: '/photography',
            crumbLabel: 'Photography',
          },
          {
            pathname: '/writings/',
            crumbLabel: 'Writings',
          },
        ],
      },
    },

Anyway I would still need to manually get the title for a generated page, IMO this could also be added to the crumb array by adding an option labelPropName: "title" which will look in the parsed pages (allMarkdownRemark) for a prop called title.

Final crumb array would be:

    "sitePage": {
      "context": {
        "breadcrumb": {
          "crumbs": [
            {
              "pathname": "/",
              "crumbLabel": "Root"
            },
            {
              "pathname": "/writings",
              "crumbLabel": "Writings" // based on `updateCrumbLabels`
            },
            {
              "pathname": "/writings/custom-slug",
              "crumbLabel": "Custom Slug" // parsed by prop name from `allMarkdownRemark`
            }
          ]
        }
      }
    }
  }

[sbardian]

@muuvmuuv i performed the same update and it works fine for me. Are you sure you have updated to the new release and restarted gatsby build/develop? This is performed at build time.

Edit: I tested the 'writings' portion of this example. I'm not sure about the markdown part, the release should solve for the sections in the middle of the crumb the issue asked to be able to update (ie Root / Writings / Day and Night)

[muuvmuuv]

Dump me, forgot to restart the dev server...

What is your opinion about my seconds suggestion? In my case this is kind of necessary because I implemented the breadcrumb into my header layout component, so I do not need to paste it into every new page and it is more dynamic.

[muuvmuuv]

Good idea, this would work I guess but I'm using the gatsby-plugin-layout and don't know how to replicate it with it. The problem is I don't know how to pass something to my context from a page component. I always get Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: when I try to use the dispatcher inside componentDidMount.

  componentDidMount() {
    console.log('SET BREADCRUMB STUFF HERE')
    console.log(this.props.pageContext.breadcrumb.crumbs)

    const historyDispatch = useContext(History.Dispatch)

    historyDispatch({
      crumbLabel: 'Writings',
    })
  }

[sbardian]

@muuvmuuv let me look into the layout plugin and get back to you

[muuvmuuv]

Ahh okay, got it. I need to use useEffect because I'm using a different approach for a global context from this tutorial here:https://medium.com/@samuelresua/global-state-with-react-context-cfa99946900d

  const historyDispatch = useContext(History.Dispatch)

  useEffect(() => {
    historyDispatch({
      location: breadcrumb.location,
      crumbLabel: frontmatter.title,
      crumbs: breadcrumb.crumbs,
    })
  })

but somehow the "writings" is still not correctly displayed. I will investigate more. Could you update the books example with the new option you have added, so I can look for differences?

[sbardian]

@muuvmuuv that looks to just be global state for your app using useContext and useReducer. Should have nothing to do with the gatsby pageContext that is passed to each page in /pages of a gatsby app. which is where the breadcrumbs come from. No need to query them/etc.

see here: https://github.com/sbardian/books/blob/0cee5e392b0ea2b9d258c6416bb8e5df2280a402/src/pages/index.js#L16

And the only update to book would be me including the following in my gatsby-config.js for the gatsby-plugin-breadcrumb:

    {
      resolve: `gatsby-plugin-breadcrumb`,
      options: {
        useAutoGen: true,
        exclude: [`/dev-404-page`, `/offline-plugin-app-shell-fallback`],
        crumbLabelUpdates: [
          { pathname: "/book", crumbLabel: "Books" },
        ],
      },
    },

and not sure what you are doing with the historyDispatch in that useEffect/etc.? Sry

Edit: oh, is that how you are passing props to the layout using gatsby-plugin-layout ?

[muuvmuuv]

@sbardian yes that is the way I'm passing data to the breadcrumb:

import React, { useContext } from 'react'
import { Breadcrumb as BreadcrumbPlugin } from 'gatsby-plugin-breadcrumb'

import { History } from '../store'

// TODO: https://github.com/sbardian/gatsby-plugin-breadcrumb/issues/42
const Breadcrumb = () => {
  const { location, crumbLabel, crumbs } = useContext(History.State)
  console.log({ location, crumbLabel, crumbs })

  return (
    <BreadcrumbPlugin
      crumbs={crumbs}
      crumbSeparator="/"
      crumbLabel={crumbLabel}
      disableLinks={['/', location]}
    />
  )
}

export default Breadcrumb

[TheFirstMe]

@muuvmuuv Regarding the part about "Day and Night" in the breadcrumbs... I also want the same effect. How did you solve it?

[sbardian]

Crap! sorry about that. Fix coming in hot.

[TheFirstMe]

@muuvmuuv I also have the <Breadcrumb /> component in my layout, and on each page (page template/etc) using the layout, I pass props to the layout that I then pass to the <Breadcrumb /> component within the layout component. See the Click Tracking Layout example (https://github.com/sbardian/gatsby-plugin-breadcrumb#click-tracking-layout-component-example). Instead of passing a location prop, you would pass a crumbs and crumbLabel prop.

You can also look at my books project for an example of doing this:

• page template (https://github.com/sbardian/books/blob/0cee5e392b0ea2b9d258c6416bb8e5df2280a402/src/templates/book-page.js#L25)
• layout (https://github.com/sbardian/books/blob/0cee5e392b0ea2b9d258c6416bb8e5df2280a402/src/components/layout.js#L117)

@sbardian This is doable. But we have to pass crumbs and crumb label to Layout every time. Is there a workaround for that?

[sbardian]

@TheFirstMe wouldn't you want to? since each page has different/its own breadcrumb? Maybe I'm not understanding?

[TheFirstMe]

@sbardian I was thinking something like running a query in the Layout component with current location as a parameter. So I can extract the breadcrumbs from the Layout component itself. Is this possible?

[TheFirstMe]

@sbardian What I mean is accessing the page contexts from Layout component.

[sbardian]

@TheFirstMe hmm I'm not sure you could. You could query but would need to query with some variable to get the correct page context, so that query would have to live on the page not the component since it has variables. Far as I know static queries still don't support variables...

[muuvmuuv]

You are right @sbardian, Graphql is not available in onCreatePage – sadly. BUT it is possible that the user itself set a page context prop in createPages. This you could access with page.context.crumbLabel.

in createPages:

    return createPage({
      path: slug,
      component: path.resolve(`./src/templates/${templateName}Single.jsx`),
      context: {
        crumbLabel: node.frontmatter.title,
        slug,
      },
    })

in onCreatePage:

exports.onCreatePage = ({page}) => {
  console.log(page.context.crumbLabel)
  process.exit(1)
}

[sbardian]

@muuvmuuv I think this was/is similar to the initial approach I took, I just didn't see it as "better" and was a more complex implementation.

And the user still has to submit the crumbLabel for each page. Guess I just didn't see the difference between using frontmatter and a prop?

Edit: users would then have to use the frontmatter plugin to use gatsby-plugin-breadcrumb, and what if people don't use mdx? Just throwing out thoughts here . . .

[muuvmuuv]

I mean, this is optional, right and just an suggested improvement to minimal manual configuration. Plugins that are requirering other plugins for some feature aren't uncommon.
So using crumbLabel at build time would have saved me a lot of time fiddling around with createContext and sending this around. Sure I would still need to send crumbs around, this would be the next improvement––so this plugin would in future somehow get the pageContext by itself. I guess this could be solved by using a Context/Consumer combination at wrapRootElement but this already exeeds this issue.