javascript - 如何编写突变响应检查

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 钩子(Hook)提供响应类型的“要点”是指示突变返回的响应的形状。当您执行突变时，您将执行以下操作:

const { data } = await login()

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