Gatsby: [gatsby] [types] location state type

[antoinerousseau]

Description

When using the provided PageProps type for my Gatsby page, I cannot type the location state: it is forced to be {}.

Steps to reproduce

• Create a new Gatsby site using TypeScript
• Type a page component as React.FC<PageProps>
• Check its props.location.state type: it's {}.

The PageProps type has a DataType and a PageContextType arguments, but it's missing a StateType argument to be passed down to WindowLocation and HLocation (that one does have a <S = LocationState> param).

Expected result

location.state page prop should be of given type or undefined. Example:

import { PageProps } from "gatsby"

interface MyState {
  test: string
}

const MyPage: React.FC<PageProps<null, null, MyState>> = ({ location }) => {
  return <div>Test: {location.state?.test}</div>
}

Actual result

location.state page prop can't have a type.

Fix

I was able to fix it locally in a .d.ts:

type GatsbyPageProps<D, P> = import("gatsby").PageProps<D, P>
type HistoryLocation<S> = import("history").Location<S> // don't forget the generic!

interface PageProps<D = object, P = object, S = object> extends GatsbyPageProps<D, P> {
  location: Window["location"] & HistoryLocation<S>
}

https://codesandbox.io/s/gatsby-page-props-b58m8?file=/src/pages/page-2.tsx

Environment

  System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.12.0 - ~/.nvm/versions/node/v13.12.0/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v13.12.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 81.0.4044.113
    Firefox: 72.0.2
    Safari: 13.0.5
  npmPackages:
    gatsby: ^2.20.23 => 2.20.23
    gatsby-image: ^2.3.3 => 2.3.3
    gatsby-plugin-google-analytics: ^2.2.3 => 2.2.3
    gatsby-plugin-manifest: ^2.3.4 => 2.3.4
    gatsby-plugin-netlify: ^2.2.2 => 2.2.2
    gatsby-plugin-react-helmet: ^3.2.3 => 3.2.3
    gatsby-plugin-sharp: ^2.5.5 => 2.5.5
    gatsby-plugin-styled-components: ^3.2.2 => 3.2.2
    gatsby-plugin-typescript: ^2.3.2 => 2.3.2
    gatsby-source-contentful: ^2.2.8 => 2.2.8
    gatsby-source-filesystem: ^2.2.3 => 2.2.3
    gatsby-transformer-sharp: ^2.4.5 => 2.4.5

Related

https://github.com/DefinitelyTyped/DefinitelyTyped/pull/27699
https://github.com/antoinerousseau/gatsby-starter-antoine/blob/master/src/gatsby.d.ts

[Js-Brecht]

I wonder if it would make sense to submit a PR fixing this in @types/reach__router. That would make implementing an additional generic parameter in PageProps a little more straightforward. It would at least eliminate the need to recreate the same types that are already in @reach/router in Gatsby.

[antoinerousseau]

@Js-Brecht it does, so I opened https://github.com/DefinitelyTyped/DefinitelyTyped/pull/44081 :)

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜