Реагировать на Apollo Query / Mutation Typescript - PullRequest
Новая
       18

Реагировать на Apollo Query / Mutation Typescript

0 голосов
/ 08 апреля 2019

Мне нужна помощь в попытке набрать мутацию и запрос.Документация и примеры ограничены, и я изо всех сил пытаюсь понять, как это сделать.Я не совсем понимаю последнее свойство из документации.Вроде бы ввод, ответ, переменные?https://www.apollographql.com/docs/react/recipes/static-typing

запрос и мутация ниже, где я должен был использовать любой: 

interface Data {
  loading: DataValue<boolean> | undefined;
  isLinkValid: DataValue<boolean> | undefined;
}
interface InputProps {
  location: {
    search: string;
  };
  showToast: Function;
}
interface Variables {
  id: string | string[] | null | undefined;
}

const validateLinkQuery = graphql<InputProps, Data, Variables, Data>(VALIDATE_LINK_MUTATION, {
  options: ({ location }) => {
    const params = QueryString.parse(location.search);
    const id = params.id;
    return {
      variables: { id },
    };
  },
  props: ({
    ownProps,
    data,
  }: {
    ownProps: {
      showToast: Function;
    };
    data?: any;
  }) => {
    const { validateLink, loading, error } = data;
    if (error) {
      ownProps.showToast(
        Type.ERROR,
        get(error, 'graphQLErrors[0].message', 'An error occured on the validate link query')
      );
    }
    return {
      isLinkValid: validateLink,
      loading,
    };
  },
});



const validateUserMutation = graphql(
  VALIDATE_CARD_MUTATION,
  {
    props: ({ ownProps, mutate }) => ({
      validateCard: (access: SubmitAccessInput) =>
        mutate({
          variables: {
            access,
          },
        })
          .then((response: any) => response)
          .catch((error: any) => {
            ownProps.showToast(
              Type.ERROR,
              get(error, 'graphQLErrors[0].message', 'An error occurred while signing up for an account')
            );
          }),
    }),
  }
);```

1 Ответ

1 голос
/ 09 апреля 2019

Я бы использовал библиотеку [https://github.com/dotansimha/graphql-code-generator][1], тип генератора и компонент React Apollo HOC с типом, основанным на вашей схеме graphql.

После того, как вы можете сделать что-то вроде этого. 

import * as React from "react";
import { Mutation } from "react-apollo";
import { gql } from "apollo-boost";
import { RouteComponentProps } from "react-router-dom";

import { LoginMutationVariables, LoginMutation } from "../../schemaTypes";
import { meQuery } from "../../graphql/queries/me";
import { userFragment } from "../../graphql/fragments/userFragment";
import { Form } from "./Form";

const loginMutation = gql`
  mutation LoginMutation($email: String!, $password: String!) {
    login(email: $email, password: $password) {
      ...UserInfo
    }
  }

  ${userFragment}
`;

export class LoginView extends React.PureComponent<RouteComponentProps<{}>> {
  render() {
    return (
      <Mutation<LoginMutation, LoginMutationVariables>
        update={(cache, { data }) => {
          if (!data || !data.login) {
            return;
          }

          cache.writeQuery({
            query: meQuery,
            data: { me: data.login }
          });
        }}
        mutation={loginMutation}
      >
        {(mutate, { client }) => (
          <Form
            buttonText="login"
            onSubmit={async data => {
              // optional reset cache
              await client.resetStore();
              const response = await mutate({
                variables: data
              });
              console.log(response);
              this.props.history.push("/account");
            }}
          />
        )}
      </Mutation>
    );
  }
}

Здесь LoginMutationVariables и тип LoginMutation генерируются с помощью graphql-code-generator.

graphql-code-generator также генерирует `React Apollo Mutation / Query Hoc компонент с типом для всех мутаций и запросов. Таким образом, вам даже не нужно передавать эти типы. После генерации компонента HOC вы можете написать такой же компонент, как этот 

<LoginMutationComponent>
... rest of the code
</LoginMutationComponent>

вместо того, чтобы делать это 

<Mutation<LoginMutation, LoginMutationVariables>

Но вам нужно настроить graphql-code-generator. если вы хотите сгенерировать компонент HOC для запросов и мутации

...