Apollo Client to TypegraphQL apollo server query failing - 400 response

Question

I'm running a query from the apollo client with the following structure:

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

On the server side, I have the following resolver, which is built on 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;

}

I'm getting a 400 response from the server. I checked the network console and there's a message inside the response saying the following:

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!"."

I'm not sure how to fix this issue of miss-matching types. It's also weird how it claims to expect "AuthenticationInput!" where the type is supposed to be that but without the !.

This is the React code showing how I call the query from the component:

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>
    );
};

Answer 1

The query you shared has AuthenticationInput (not AuthenticationInput! ) meaning that this value is nullable.

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

But the error you see: "Variable "$authenticationInput" of type "AuthenticationInput" used in position expecting type "AuthenticationInput!" is suggesting that the GraphQL server is expecting AuthenticationInput! (a non-nullable value).

Have you tried updating you query to match those types?

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