【Gatsby】pageコンポーネント間でstateを共有する方法

Copy
import { createContext, useState, useContext } from "react";

// Context作成
const SampleContext = createContext();

// Contextを取得する関数を作成する
const useSampleContext = () => useContext(SampleContext);

// 引数の要素をproviderでラップするコンポーネント
const SampleProvider = ({ children }) => {
  // state
  const [count, setCount] = useState(1);

  // stateを加算
  const add = () => {
    setCount((prevCount) => prevCount + 1);
  };

  // stateを減算
  const substract = () => {
    setCount((prevCount) => (prevCount !== 0 ? prevCount - 1 : prevCount));
  };

  // Contextに設定するオブジェクトに値を設定
  const contextValue = {
    count,
    setCount,
    add,
    substract
  };

  return (
    // 作成したContextのproviderでラップする
    <SampleContext.Provider value={contextValue}>
      {children}
    </SampleContext.Provider>
  );
};

// 関数とコンポーネントをexportしておく
export { useSampleContext, SampleProvider };

Copy
import React from "react"
import { SampleProvider } from "./src/context"

export const wrapRootElement = ({ element }) => {
  console.log("wrapRootElement")
  return <SampleProvider>{element}</SampleProvider>
}

Copy
import React from "react"
import { SampleProvider } from "./src/context"

export const wrapRootElement = ({ element }) => {
  console.log("wrapRootElement")
  return <SampleProvider>{element}</SampleProvider>
}

Copy
import * as React from "react"
import { Link, graphql } from "gatsby"
import { useSampleContext } from "../context"
import { css } from "@emotion/react"

const BlogIndex = ({ data }) => {
  const nodeList = data.allContentfulBlogPost.edges

  //共有しているstateと関数を取得
  const { count, add, substract } = useSampleContext()

  return (
    <div>
      {/* 共有stateの表示と更新ボタン */}
      <div css={[btnStyle]}>
        contextのstate: {count}
        <button onClick={add} css={[btnStyle]}>
          加算
        </button>
        <button onClick={substract} css={[btnStyle]}>
          減算
        </button>
      </div>
      {nodeList.map(({ node }) => {
        return (
          <div>
            <Link to={node.slug}>{node.title}</Link>
          </div>
        )
      })}
    </div>
  )
}

export default BlogIndex

export const pageQuery = graphql`
  query {
    allContentfulBlogPost {
      edges {
        node {
          title
          slug
        }
      }
    }
  }
`

const btnStyle = () => [
  css`
    margin: 20px;
  `,
]

Copy
import * as React from "react"
import { Link, graphql } from "gatsby"
import { useSampleContext } from "../context"
import { css } from "@emotion/react"

const About = ({ data }) => {
  //共有しているstateと関数を取得
  const { count, add, substract } = useSampleContext()

  return (
    <div>
      <Link to="/">Home</Link>
      {/* 共有stateの表示と更新ボタン */}
      <div css={[btnStyle]}>
        contextのstate: {count}
        <button onClick={add} css={[btnStyle]}>
          加算
        </button>
        <button onClick={substract} css={[btnStyle]}>
          減算
        </button>
      </div>
      <h1>About</h1>
    </div>
  )
}

export default About

const btnStyle = () => [
  css`
    margin: 20px;
  `,
]

Copy
import React from "react"
import { graphql, Link } from "gatsby"
import MDXConvert from "../components/mdxConvert"
import { useSampleContext } from "../context"
import { css } from "@emotion/react"

const ContentfulPost = ({ data }) => {
  const post = data.allContentfulBlogPost.edges[0].node
  const { body } = post

  //共有しているstateと関数を取得
  const { count, add, substract } = useSampleContext()

  return (
    <div>
      <Link to="/">Home</Link>
      {/* 共有stateの表示と更新ボタン */}
      <div css={[btnStyle]}>
        contextのstate: {count}
        <button onClick={add} css={[btnStyle]}>
          加算
        </button>
        <button onClick={substract} css={[btnStyle]}>
          減算
        </button>
      </div>
      <MDXConvert>{body.childMdx.body}</MDXConvert>
    </div>
  )
}

export default ContentfulPost

// gatsby-node.jsのcreatePageから渡されたslugを元にGraphQLで記事を取得する
export const query = graphql`
  query Query($slug: String!) {
    allContentfulBlogPost(filter: { slug: { eq: $slug } }) {
      edges {
        node {
          body {
            childMdx {
              body
            }
          }
        }
      }
    }
  }
`

const btnStyle = () => [
  css`
    margin: 20px;
  `,
]

Copy
import React from "react"
import { SampleProvider } from "./src/context"

export const wrapPageElement = ({ element }) => {
  console.log("wrapPageElement")
  return <SampleProvider>{element}</SampleProvider>
}

Copy
import React from "react"
import { SampleProvider } from "./src/context"

export const wrapPageElement = ({ element }) => {
  console.log("wrapPageElement")
  return <SampleProvider>{element}</SampleProvider>
}