doc(static-typing): rewrite with GraphQL Code Generator setup

[charlypoly]

Hi Apollo team 👋🏼

I am Charly, a member of The Guild and current lead of the GraphQL Code Generator project.

As we recently collaborated on AS4 documentation update on Types Generation, we thought that we could also help in updating AS3 (and upcoming AS4) documentation regarding best practices when using TypeScript with GraphQL.

GraphQL Code Generator rapidly evolved in the last months and now provides a way smoother way to get typed queries, mutations, and subscriptions, that no longer rely on generated types or hooks.

Example:

import React from 'react'
import { useQuery } from '@apollo/client'
 
import './App.css'
import Film from './Film'
import { graphql } from '../src/gql'
 
const allFilmsWithVariablesQueryDocument = graphql(/* GraphQL */ `
  query allFilmsWithVariablesQuery($first: Int!) {
    allFilms(first: $first) {
      edges {
        node {
          ...FilmItem
        }
      }
    }
  }
`)
 
function App() {
  // `data` is typed!
  const { data } = useQuery(allFilmsWithVariablesQueryDocument, { variables: { first: 10 } })
  return (
    <div className="App">
      {data && <ul>{data.allFilms?.edges?.map((e, i) => e?.node && <Film film={e?.node} key={`film-${i}`} />)}</ul>}
    </div>
  )
}
 
export default App

Please consider the following changes as a starting draft, I would love to work together in providing documentation that recommends the best developer experience for all GraphQL developers out there.

---

N.B notes/questions:

• Do we still want to include documentation for render props and HoC?

[StephenBarlow]

Hi @charlypoly! Thanks for this PR. Many Apollo folks are taking a breather after our big conference last week, but we'll take a look at this properly next week 👍

[charlypoly]

Hi @StephenBarlow,

Thank you for the update!

[bignimbus]

LGTM @charlypoly - I added a couple of tiny corrections and one question for you. Thanks so much!

[rkoron007]

Thank you so much for this PR charlypoly! 🙏 So sorry for my late review here, my suggestions mostly revolve around style, but please feel free to push back if anything doesn't feel good to you.

[charlypoly]

@bignimbus, @rkoron007, thank you for your thorough review! I've applied the suggestion and committed some changes.

[rkoron007]

I had a few small suggestions, but since they are mainly tiny tweaks, I can take care of batching and committing them so this merged in sooner!

[charlypoly]

@rkoron007 @bignimbus @StephenBarlow, thank you for your valuable and fast feedback! ⚡