reactjs - Ved bruk av react-apollo, hvordan definere 2 mutasjoner i samme komponent med TypeScript?

Ved å bruke følgende problem på GitHub er jeg i stand til å få en mutasjon til å fungere med Typescript. Men jeg fant ikke en måte å bruke 2 mutasjoner i samme komponent på.

Det finnes bare én mutate()-funksjon i this.props.

Hvordan må vi skrive vår komponent for å få den til å forstå name-alternativene som sendes til GraphQL?

graphql<ContainerProps, {}, string, ContainerProps>(gql`... `, { name: 'deleteData' });
graphql<ContainerProps, {}, string, ContainerProps>(gql`...`, { name: 'createData' });

REDIGER: Hvis de 2 mutasjonene har det samme parameteret navnet (en string kalt id for eksempel), trenger vi virkelig å pakke disse parameterne inn i en eksplisitt type?

REDIGER 2: Jeg får denne unntaket når jeg erklærer de 2 mutasjonene med { name: 'xxx' }:

TypeError: _this.props.mutate er ikke en funksjon

Hvis jeg erklærer bare én mutasjon (uten navnealternativet), fungerer det som det skal.

Svar #1

Basert på lenken gitt av Miro Lehtonen, her er hva som fungerer for meg.

type MutationProps = {
    create: MutationFunc<IResponse, ICreateVariables>;
    delete: MutationFunc<IResponse, IDeleteVariables>;
};

type ContainerProps = OtherQueryProps & MutationProps;

const withCreate =
    graphql<ContainerProps, IResponse, ICreateVariables, ContainerProps>(
        CreateMutation,
        {
            // tslint:disable-next-line:no-any
            props: ({ mutate, ...rest }): any => ({
                ...rest,
                create: mutate
            })
        });

Koden er den samme for delete-muteringen.

Koden fungerer, men jeg liker ikke å ha any i den. Jeg fant ikke en måte å korrekt typisere propsene på, og jeg tror ikke jeg returnerer riktig type (selv om det fungerer fint). Alle forslag er veldig velkomne (om hvordan man kan fjerne any).

Svar #2

Standardnavnet for en mutasjon vil være mutate som du kan få tilgang til gjennom props.mutate. Hvis du ønsker å ha flere mutasjoner i samme komponent, må du gi dem navn som deleteData og createData. Disse er tilgjengelige gjennom props.deleteData og props.createData.

En god praksis er å gi navn til alle mutasjoner, bare for å gjøre koden din lettere å lese. Som et generisk navn er mutate ikke veldig beskrivende.