时间戳

首页 > 解决方案 > Apollo 客户端到 TypegraphQL apollo 服务器查询失败 - 400 响应

reactjs - Apollo 客户端到 TypegraphQL apollo 服务器查询失败 - 400 响应

问题描述

我正在从具有以下结构的 apollo 客户端运行查询：

export const LOGIN_USER = gql`
mutation loginUser($authenticationInput: AuthenticationInput){
    loginUser(authenticationInput: $authenticationInput){
        email
        password
    }
} `;

在服务器端，我有以下基于 TypeGraphQL 的解析器：

@Mutation(() => User)
async loginUser(@Arg('authenticationInput') authenticationInput : AuthenticationInput): Promise<User> {
    logResolver.info("Login user query received.");
    let result = await this.userService.findUser(authenticationInput)
    .then(result => {
        return result;
    });
    return result;

}

我从服务器收到 400 响应。我检查了网络控制台，响应中有一条消息，内容如下：

extensions: {code: "GRAPHQL_VALIDATION_FAILED", exception: {stacktrace: [,…]}}
locations: [{line: 1, column: 20}, {line: 2, column: 34}]
message: "Variable "$authenticationInput" of type "AuthenticationInput" used in position expecting type "AuthenticationInput!"."

我不确定如何解决这个错误匹配类型的问题。它声称期望“AuthenticationInput！”的方式也很奇怪。类型应该是那个但没有！。

这是显示我如何从组件调用查询的 React 代码：

export default function LoginForm() {
    const [fields, setFields] = useState({});
    const client = useApolloClient();
    const [loginUser, { loading, error, data }] = useMutation(LOGIN_USER, {
        onCompleted({ login }) {
            console.log("Logged in baby");
            localStorage.setItem('token', login);
            client.writeData({data: { isLoggedIn: true}});
        }
    });

    function updateField(idx : string, value : string){
        setFields({...fields, [idx]: value});
    }

    function userLogin(){
        loginUser({variables: fields});
    }



    return(<div>
        {loading ? <p>loading!</p> : null}
        {error ? <p>Error!</p> : null}
        <InputText onChange={updateField} id="email" type="email" placeholder="email"></InputText>
            <InputText onChange={updateField} id="password" type="password" placeholder="password"></InputText>
            <SubmitFormButton 
            click={userLogin}
             text="login"></SubmitFormButton>
            </div>
    );
};

标签： reactjsgraphqlapollo-clienttypegraphql

解决方案

您共享的查询具有AuthenticationInput(not AuthenticationInput!) 意味着该值可以为空。

export const LOGIN_USER = gql`
  mutation loginUser($authenticationInput: AuthenticationInput) {
    loginUser(authenticationInput: $authenticationInput) {
      email
      password
    }
  }
`;

但是您看到的错误："Variable "$authenticationInput" of type "AuthenticationInput" used in position expecting type "AuthenticationInput!"表明 GraphQL 服务器正在期待AuthenticationInput!（一个不可为空的值）。

您是否尝试过更新查询以匹配这些类型？

export const LOGIN_USER = gql`
  mutation loginUser($authenticationInput: AuthenticationInput!) {
    loginUser(authenticationInput: $authenticationInput) {
      email
      password
    }
  }
`;

推荐阅读