chore(docs): Improve `PageProps` location

[tordans]

Description

I was looking for a way to type the location state. There is really no good reference, so it took me way longer than I wished it had.

This PR needs a good review in terms of TypeScript terminology (attribute? generic?). And maybe there is a more elegant way of doing this?

• Maybe extract the state in a separate type to clarify what is going on?

  type State = { modal: boolean }
  type Props = { location: PageProps<unknown, unknown, State>['location'] }
  

• There should be a way to pick the location directly, right? Something like … (did not test …)

  type Props = Pick<PageProps<unknown, unknown, { modal: boolean }>, 'location'>
  

Here is what did not really helped me, but was all I could find…

• https://reach.tech/router/typescript does not help in this case
• https://github.com/reach/router/issues/414 is kind of helpful but has too many answers that just typecast or any the issue. And it also does not work with the Gatsby PageProps, which we should, I guess.

[LekoArts]

Hey, thanks for the PR!

We should expand the information given here instead: https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/#pageprops

We could extend it to something like this:

import * as React from "react"
import { graphql, PageProps } from "gatsby"

type DataProps = {
  site: {
    siteMetadata: {
      title: string
    }
  }
}

type PageContext = {
  id: string
}

type Location = {
  modal: boolean
}

const IndexRoute = ({ data: { site }, pageContext, location }: PageProps<DataProps, PageContext, Location>) => {
  return (
    <main>
      <h1>{site.siteMetadata.title}</h1>
      <p>{pageContext.id}</p>
      <p>{JSON.stringify(location, null, 2)}</p>
    </main>
  )
}

export default IndexRoute

export const query = graphql`
  {
    site {
      siteMetadata {
        title
      }
    }
  }
`

[tordans]

@LekoArts yes, that sounds like a good expansion of the existing example over there. However, it does not explain how to pick the location for a component. Experienced TS'ler will not have a problem here, I guess, but I would have preferred a hint right at this place.

Maybe we can add a sentence in this section of the docs linking over and hinting at the pick? Something like…

## Example of providing state to a link component
(… example code …)

Typescript hint: The [Typescript doc page](/docs/how-to/custom-configuration/typescript/#pageprops) 
explains how to use the Gatsby `PageProps` to type the location . You can pick the location attribute with 
`Pick<PageProp<unknown,unknown,{yourProp: string}>>` for use in sub components.

[LekoArts]

Just to understand it correctly:

So your use case would be that you define the PageProps and then some component will access the location of PageProps to use it for something. Are you passing location or modal (to refer to the example above)? Can you give an example?

If it's the former (passing location to a component) I'd say have a look at this: https://twitter.com/JoshWComeau/status/1551031947501211651

[LekoArts]

Closing this PR for as it got stale. If you want to continue the discussion above please reply. Thanks for the PR though!