如何编写突变响应检查答案

【问题标题】：How to Write A Mutation Response Check如何编写突变响应检查
【发布时间】：2020-07-15 23:31:16
【问题描述】：

我正在运行这样的 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.loginEmail.accessToken 的data 错误：

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

【问题讨论】：

标签： javascript reactjs typescript graphql apollo

【解决方案1】：

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

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

const { data } = await login()

通过为响应提供类型，data 的类型将是该类型，而不是 any。如果您尝试访问 data 上未由类型定义的属性，TypeScript 编译器将抛出错误（根据编辑器，您也会在编辑器中看到错误）。

【讨论】：

有道理！你能看到更新的qs吗？如何解决空问题？是因为查询可能根本不返回任何内容吗？万一突变不成功。（例如，如果密码不正确）
对，所以在访问它的任何属性之前，您应该确保它是真实的。顺便说一句，你可以generate these type definitions而不是自己写。
现在可以使用了。如果我尝试访问接口中未定义的属性，则会引发错误。但是，如果我在界面中将accessToken的数据类型更改为number，并尝试访问accessToken，它仍然有效。这正常吗？
是的，但是如果您尝试在其上调用 trim 之类的 String 方法，它也会抛出。