markdown 阿波罗查询打字稿

Posted 2021-05-05

[official](https://www.apollographql.com/docs/react/recipes/static-typing.html)
official doc has bug about using 'props' function  
which can be solved by [this](https://github.com/apollographql/react-apollo/issues/2568)

---

# define type(interface)
used **commonly** on both cases (HOC and Component styles)
```tsx
import { ChildDataProps, graphql, Query } from 'react-apollo'

type Rite = {
  ...
}

type Response = {
  rites: Rite[];
};

type Variables = {
  personId: string;
};
```

---

# 1. HOC style
```tsx
type InputProps = {
  personId: string,
}

type ChildProps = ChildDataProps<InputProps, Response, Variables>;

const withRitesByPerson = graphql<InputProps, Response, Variables, ChildProps>(RITES_QUERY, {
  options: ({ personId }) => ({
    variables: { personId },
    fetchPolicy: 'cache-and-network'
  })
});

const PersonalRitesQuery = withRitesByPerson(({ data: { loading, rites, error } }) => {
  if (error) return <div>Error {JSON.stringify(error)}</div>
  return (<div>
    {loading && <div>Fetching</div>}
    {rites && <PersonalRitesTable rites={rites} />}
  </div>)
})
```
less readable but easy to use as HOC later?
hard to use 'state'

# 2. Component style
```tsx

class AllPeopleQuery extends Query<Response, Variables> { }
class PersonalRitesQuery extends React.Component<{ personId: string }> {
  render() {
    const { personId } = this.props

    return (
      <AllPeopleQuery
        query={RITES_QUERY}
        variables={{ personId: personId }}
        fetchPolicy={'cache-and-network'}
      >
        {({ loading, error, data, refetch, networkStatus }) => {
          if (error) return <div>Error {JSON.stringify(error)}</div>
          return (<div>
            {loading && <div>Fetching</div>}
            {data && data.rites && <PersonalRitesTable rites={data.rites} />}
          </div>)
        }}
      </AllPeopleQuery>
    )
  }
}
```
more readable