reactjs - How to pass data between Gatsby Markdown pages in a React JS app

Question

So my app is structured like this, I have a markdown page :

template: myTemplate
slug: 'temp/myTemplate1'
id: ''
locationName: ''
address1: ''
city: ''
state: ''
zip: ''
title: My Title
featuredImage: 'imageSample1.png'
subtitle: 'A subtitle'
meta:
  description: >-
    Page Description
  title: 'My Template'
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae semper quis lectus nulla at volutpat. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc. Non tellus orci ac auctor augue. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Ut faucibus pulvinar elementum integer. Egestas maecenas pharetra convallis posuere morbi leo. Dignissim convallis aenean et tortor at. Quisque id diam vel quam. Proin libero nunc consequat interdum varius. Feugiat nisl pretium fusce id.

This md file is using the template that comes from a jsx file like this:

export const myTemplateTemplate = ({ data }) => {
  const { frontmatter, body } = data.page;
  const {
    title,
    subtitle,
    featuredImage,
    locationName,
    address,
    city,
    state,
    zip,
  } = frontmatter;

  return (
    <Layout
      title={title}
      subtitle={subtitle}
      featuredImage={featuredImage}
    >
      <MainContainer>
        <TitleContainer>
          <H2>{title}</H2>
        </TitleContainer>
        <InfoContainer>
          {featuredImage && (
            <FeatureImageContainer>
              <Image
                fileName={featuredImage}
              />
            </FeatureImageContainer>
          )}
          <MainInfoContainer>
            {locationName}
            {address}
            {city}
            {zip}
          
          </MainInfoContainer>
        </InfoContainer>
        <MainBodyContainer>
          <Content source={body} />
        </MainBodyContainer>
      </MainContainer>
    </Layout>
  );
};

export default EventsPageTemplate;

export const pageQuery = graphql`
  query EventsPage($id: String!) {
    page: mdx(id: { eq: $id }) {
      body
      frontmatter {
        slug
        title
        subtitle
        featuredImage
        locationName
        address
        city
        state
        zip
      }
    }
  }
`;

Now I have about a dozen of pages using the same template with slight variations, city address, state, zip, featured image, they are different. I want to add a button to that template so that it can go to another markdown page and this page is supposed to be dynamic which will take and render city, address, state, zip, featured image and body from the current page and display it.

So how can I achieve that? How can I share data between the two md files?

question from:https://stackoverflow.com/questions/65651364/how-to-pass-data-between-gatsby-markdown-pages-in-a-react-js-app

Answer 1

Ok let me more clearer. I have one template for events now I have various events markdown files So each event markdown file has a different title, subtitle, address, city, state etc, that's the only difference. Now I want a event registration page where user can click on a button on one of the events page and navigate to this event registration page and now this event registration page should dynamically show the data such as title, subtitle, address, city, state etc depending on from which event page its coming from. Now how can I pass that data to event registration?

According to the new data provided in the comment section, I will rephrase the answer.

To keep working with the events template and pass data to your /registration page you can use the <Link>'s state, this is a way to passing data to the destination page using @reach/router's state, but to be clear, this is not a way to pass data to a markdown file (or between them), is a way to pass data to a page that is built based on a markdown data (sourcing).

export const myTemplateTemplate = ({ data }) => {
  const { frontmatter, body } = data.page;
  const {
    title,
    subtitle,
    featuredImage,
    locationName,
    address,
    city,
    state,
    zip,
  } = frontmatter;

  return (
    <Layout
      title={title}
      subtitle={subtitle}
      featuredImage={featuredImage}
    >
      <MainContainer>
        <TitleContainer>
          <H2>{title}</H2>
        </TitleContainer>
        <InfoContainer>
          {featuredImage && (
            <FeatureImageContainer>
              <Image
                fileName={featuredImage}
              />
            </FeatureImageContainer>
          )}
          <MainInfoContainer>
            {locationName}
            {address}
            {city}
            {zip}
          
          </MainInfoContainer>
        </InfoContainer>
        <MainBodyContainer>
          <Content source={body} />
        <Link state={{ 
            title: title
            subtitle: subtitle
            address:address
            city: ity
            state: state
            zip: zip
            }} to="/registration">Register
        </Link>
        </MainBodyContainer>
      </MainContainer>
    </Layout>
  );
};

export default EventsPageTemplate;

export const pageQuery = graphql`
  query EventsPage($id: String!) {
    page: mdx(id: { eq: $id }) {
      body
      frontmatter {
        slug
        title
        subtitle
        featuredImage
        locationName
        address
        city
        state
        zip
      }
    }
  }
`;

Now, on your destination page.

const Registration= ({ location }) => {

  return <div>I'm a registration page {location.state.title && location.state.title}</div>
}

You can access <Link>'s state in props.location.state but ensure to add the mandatory controls to avoid code-breaking if you are trying to access data that are not provided.