Gatsbyのv1からv2への移行について

$ npm i gatsby@latest

$ npm outdated

Package                          Current   Wanted   Latest  Location
babel-eslint                       8.2.6    8.2.6   10.0.1  gatsby-starter-casper
eslint                             5.3.0    5.6.1    5.6.1  gatsby-starter-casper
eslint-config-airbnb              17.0.0   17.1.0   17.1.0  gatsby-starter-casper
eslint-config-prettier             2.9.0   2.10.0    3.1.0  gatsby-starter-casper
eslint-plugin-import              2.13.0   2.14.0   2.14.0  gatsby-starter-casper
eslint-plugin-jsx-a11y             6.1.1    6.1.2    6.1.2  gatsby-starter-casper
eslint-plugin-react               7.10.0   7.11.1   7.11.1  gatsby-starter-casper
gatsby-link                       1.6.46   1.6.46    2.0.4  gatsby-starter-casper
gatsby-plugin-catch-links         1.0.24   1.0.26    2.0.4  gatsby-starter-casper
gatsby-plugin-feed                1.3.25   1.3.25    2.0.7  gatsby-starter-casper

$ npm i gatsby-plugin-xxx@latest gatsby-plugin-yyy@latest ...

$ npm i react react-dom

$ npm i react-typography typography

import React from 'react'

export default ({ children, location }) => (
  <div>
    <p>現在のpathはこれ: {location.pathname}</p>
-    {children()}
+    {children}
  </div>
)

$ git mv src/layouts/index.jsx src/components/layout.jsx

import React from 'react'
+ import Layout from '../components/layout'

export default () => (
+  <Layout>
    <div>Hello World</div>
+  </Layout>
)

import React from 'react'

export default ({ children, location }) => (
  <div>
    <p>現在のpathはこれ: {location.pathname}</p>
    {children}
  </div>
)

import React from 'react'
import Layout from '../components/layout'

export default props => (
  <Layout location={ props.location }>
    <div>Hello World</div>
  </Layout>
)

import React, { Fragment } from 'react'
import Helmet from 'react-helmet'
+ import { StaticQuery, graphql } from 'gatsby'

- export default ({ children, data }) => (
-   <>
-     <Helmet titleTemplate={`%s | ${data.site.siteMetadata.title}`} defaultTitle={data.site.siteMetadata.title} />
-     <div>
-       {children()}
-     </div>
-   </>
- )
-
- export const query = graphql`
+ const query = graphql`
  query LayoutQuery {
    site {
      siteMetadata {
        title
      }
    }
  }
`
+ export default ({ children }) => (
+   <StaticQuery
+     query={query}
+     render={data => (
+       <>
+         <Helmet titleTemplate={`%s | ${data.site.siteMetadata.title}`} defaultTitle={data.site.siteMetadata.title} />
+         <div>
+           {children}
+         </div>
+       </>
+     )}
+   />
+ )

import React from 'react'
- import { navigateTo } from 'gatsby-link'
+ import { navigate } from 'gatsby'

// Don't use navigate with an onClick btw :-)
// Generally just use the `<Link>` component.
export default props => (
-  <div onClick={() => navigateTo(`/`)}>Click to go to home</div>
+  <div onClick={() => navigate(`/`)}>Click to go to home</div>
)

$ npm install --save gatsby-plugin-postcss postcss-import postcss-preset-env postcss-browser-reporter postcss-reporter

  plugins: [
+    'gatsby-plugin-postcss',
    'gatsby-plugin-xxxx',
    'gatsby-plugin-yyyy',
    //...
  ],

const postcssImport = require('postcss-import')
const postcssPresetEnv = require('postcss-preset-env')
const postcssBrowserReporter = require('postcss-browser-reporter')
const postcssReporter = require('postcss-reporter')

module.exports = () => ({
  plugins: [
    postcssImport(),
    postcssPresetEnv(),
    postcssBrowserReporter(),
    postcssReporter(),
  ],
})

<Link
  to={{ pathname: `/about/`, search: `fun=true&pizza=false`, hash: `people` }}
>
  Our people
</Link>

<Link
-  to={{ pathname: `/about/`, search: `fun=true&pizza=false`, hash: `people` }}
+  to={`/about/?fun=true&pizza=false#people`}
>
  Our people
</Link>

const NewsFeed = () => (
  <div>
    <Link to="photos/123" state={{ fromFeed: true }} />
  </div>
)

const Photo = ({ location, photoId }) => {
  if (location.state.fromFeed) {
    return <FromFeedPhoto id={photoId} />
  } else {
    return <Photo id={photoId} />
  }
}

import { navigate } from "@reach/router"

// location.pathname と完全一致していた場合のみ Active にする関数
// というかこれやるなら `activeClassName` 使ったほうが楽
const isActive = ({ isCurrent }) => {
  return isCurrent ? { className: "active" } : null
}

const ExactNavLink = props => (
  <Link getProps={isActive} {...props} />
)

// このリンクは location.pathname と完全一致しているか
// もしくは深いRoutingの場合に (＝hrefと前方一致しているとき)
// Active になる
const isPartiallyActive = ({
  isPartiallyCurrent
}) => {
  return isPartiallyCurrent
    ? { className: "active" }
    : null
}

const PartialNavLink = props => (
  <Link getProps={isPartiallyActive} {...props} />
)

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions

  // page.matchPath is a special key that's used for matching pages
  // only on the client.
  if (page.path.match(/^\/app/)) {
-    page.matchPath = "/app/:path"
+    page.matchPath = "/app/*"

    // Update the page.
    createPage(page)
  }
}

import { BrowserRouter as Router, Route } from 'react-router-dom'

export default () => (
  <Router>
    <div>
      <Route exact path="/" component={Home}>
      <Route path="/about" component={About}>
      <Route path="/store" component={Store}>
    </div>
  </Router>
)

import { Router } from '@reach/router'

export default () => (
  <Router>
    <Home path="/" />
    <About path="/about" />
    <Store path="/store" />
  </Router>
)

 import React from 'react';
-import { Redirect, Route } from 'react-router-dom';
+import { Router, navigate } from '@reach/router';
 import { isAuthenticated } from '../../utils/auth';

-export default ({ component: Component, ...rest }) => (
-  <Route
-    {...rest}
-    render={props =>
-      !isAuthenticated() ? (
-        // If we’re not logged in, redirect to the home page.
-        <Redirect to={{ pathname: '/login' }} />
-      ) : (
-        <Component {...props} />
-      )
-    }
-  />
-);
+export default ({ component: Component, ...rest }) => {
+  if (!isAuthenticated() && window.location.pathname !== `/login`) {
+    // If we’re not logged in, redirect to the home page.
+    navigate(`/app/login`);
+    return null;
+  }
+
+  return (
+    <Router>
+      <Component {...rest} />
+    </Router>
+  );
+};

/*
 * destructured object
 *
 * location {object} A location object
 * action {object} The `action` that caused the route change
 */
exports.onRouteUpdate = ({ location, action }) => {
 //...
}

/*
 * destructured object
 *
 * location {object} A location object
 * prevLocation {object|null} The previous location object
 */
exports.onRouteUpdate = ({ location, prevLocation }) => {
  console.log('new pathname', location.pathname)
  console.log('old pathname', prevLocation ? prevLocation.pathname : null)

  // Track pageview with google analytics
  window.ga(
    `set`,
    `page`,
    location.pathname + location.search + location.hash,
  )
  window.ga(`send`, `pageview`)
}

import React from 'react'
import { Provider } from 'react-redux'
-import { Router } from 'react-router-dom'

-export const replaceRouterComponent = ({ history }) => {
+export const wrapRootElement = ({ element }) => {
-  const ConnectedRouterWrapper = ({ children }) => (
+  const ConnectedRootElement = (
    <Provider store={store}>
-      <Router history={history}>{children}</Router>
+      {element}
    </Provider>
  )

-  return ConnectedRouterWrapper
+  return ConnectedRootElement
}

-export const wrapRootComponent = ({ Root }) => {
+export const wrapRootElement = ({ element }) => {
-  const ConnectedRootComponent = () => (
+  const ConnectedRootElement = (
    <Provider store={store}>
-      <Root />
+      {element}
    </Provider>
  )
-  return ConnectedRootComponent
+  return ConnectedRootElement
}