Question

我正在像这样运行graphql突变：

interface SignInReponse {
  loginEmail : {
    accessToken: string;
  }
}
const [login] = useMutation<SignInReponse>(LOGIN);

这是该模式在方案中的样子：

loginEmail(
  email: String!
  password: String!
): SignInResponse!

type SignInResponse {
  accessToken: String!
}

现在登录，一切正常，但是我觉得interface SignInResponse实际上没有任何作用。例如，我尝试用以下代码替换我的SignInResponse：

interface SignInReponse {
  users: {
   nodes: {
    id: string;
    firstHelloName:number;
    lastName: string;
    phoneNumber: string;
    email: string;
   }[]
  }
}

显然不正确。但是登录仍然成功，并且未显示任何错误。那有什么意义呢？

编辑：所以这就是我使用突变的方式：


const [login] = useMutation<SignInReponse>(LOGIN);

  let submitForm = (email: string, password: string) => {
    setIsSubmitted(true);
    login({
      variables: {
        email: email,
        password: password,
      },
    })
      .then(({ data }: ExecutionResult<SignInReponse>) => {
        dispatch({ type: "login", payload: data.loginEmail.accessToken })  
      })

在ExecutionResult<SignInReponse>之前，我只是在使用any。但是，既然我已经更改了类型，它使data上的data.loginEmail.accessToken出现了错误：

var data: SignInReponse | null | undefined
Object is possibly 'null' or 'undefined'.ts(2533)

Answer 1

在代码中添加类型不会影响代码的执行方式。必须将TypeScript编译为JavaScript才能执行，这时无论如何都会从代码中剥离任何类型信息。

为您的useMutation挂钩提供响应的类型的“要点”是指示突变返回的响应的形状。执行突变时，您将执行以下操作：

const { data } = await login()

通过提供响应的类型，data的类型将是该类型，而不是any。如果您尝试访问data上未由类型定义的属性，则TypeScript编译器将引发错误（并且取决于编辑器，您也会在编辑器中看到该错误）。

如何编写变异响应检查

1 个答案: