Gathering detailed insights and metrics for graphql-codegen-typescript-react-apollo-named
Gathering detailed insights and metrics for graphql-codegen-typescript-react-apollo-named
Installations
npm install graphql-codegen-typescript-react-apollo-namedDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
10.15.0
NPM Version
6.4.1
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
1
Package Meta Information
Latest Version
0.15.3
Package Id
graphql-codegen-typescript-react-apollo-named@0.15.3
Unpacked Size
20.29 kB
Size
6.67 kB
File Count
12
NPM Version
6.4.1
Node Version
10.15.0
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
This is a modified version of the original graphql-codegen-react-apollo plugin.
Basic changes:
- works together with or without the typescript-react-apollo plugin
- all HOCs have a custom operationOptions' name property matching the mutation name
- Mutation functions use a non-void return type to help code completion
Recommended Usage
1import * as React from "react"; 2import {compose} from "react-apollo"; 3import {MyCustomQuery} from "./types.g"; 4 5interface Props { 6 bar: any 7} 8 9class MyComponentClass extends React.Component<Props & MyCustomQuery.Props> { 10 public async componentDidMount() { 11 const res = await this.props.myCustomQuery({variables: { 12 input: { 13 foo: 5, 14 } 15 }}) 16 17 if (res.data && res.data.myCustomQuery) { 18 this.setState({ 19 bar: res.data.myCustomQuery.bar 20 }); 21 } else { 22 // handle error 23 }; 24 } 25 26 public render(): React.ReactNode { 27 return <div>{{this.props.bar}}</div> 28 } 29} 30 31export const MyComponent = compose([ 32 MyCustomQuery.HOC(), 33])(MyComponentClass) as React.Component<Props>;
How about decorators?
It would be great if we could use decorators. Skipping the whole compose()-step and manual return type mapping.
Currently this isn't perfectly possible to due a https://github.com/Microsoft/TypeScript/issues/27883 in typescript which limits the customizing of return types. Specifically filtering out react props which have been set via injection.
Another minor persistent issue is the decorator's incapability of changing the decorated classes type, which blocks adding additional properties purely via the decorator thus forcing us to merge the properties in manually
Once this is fixed we hopefully can do something like this:
1import * as React from "react"; 2import {compose} from "react-apollo"; 3import {MyCustomQuery} from "./types.g"; 4 5interface Props { 6 bar: any 7} 8 9@MyCustomQuery.HOC() 10export default class MyComponent extends React.Component<Props> { 11 public async componentDidMount() { 12 const res = await this.props.myCustomQuery({variables: { 13 input: { 14 foo: 5, 15 } 16 }}); 17 18 // ... 19 } 20 21 public render(): React.ReactNode { 22 // ... 23 } 24}
Note that we just use the exported class directly without merging our custom query props into the react components props at all.
Luckily this issue is plagueing several other cool tools such as react-router
and react-intl as well, so chances are good for this to be fixed.
No vulnerabilities found.
No security vulnerabilities found.