Hi, I'm having trouble configuring queries and mutations with React.js, Apollo, and GraphQL. Below I have a component with a query and mutation. These queries and mutations work with GraphiQL, but not with my React app. The query returns undefined, and the mutation gives me a status code 400 error. Within my Node.js API, I have a console.log() statement that prints the passed value to the query, so that query is receiving the request properly, and just isn't returning a value. The mutation also works with GraphiQL, but not with my React app. Below is the code that I have. Any help would be greatly appreciated. Thank you.
Component:
import { useQuery, useMutation } from "@apollo/client";
import { TEST, CREATE_CLIENT_ACCOUNT } from "../queries/accountQueries";
import TextInputField from "./TextInputField";
function CreateAccountFormWrapper({ name, email, password, confirmPassword, onChangeState }) {
const { testData, testLoading, testError } = useQuery(TEST, {
variables: {
id: 0
}
});
const [ createClientAccount, { data, loading, error }] = useMutation(CREATE_CLIENT_ACCOUNT);
console.log(testData);
return (
<form onSubmit={(e) => {
e.preventDefault();
createClientAccount({
variables: {
name: name,
email: email,
password: password
}
})
}}>
<div className="flex col">
<TextInputField
type={"text"}
label={"Name"}
value={name}
onChangeState={onChangeState}
/>
<TextInputField
type={"text"}
label={"Email"}
value={email}
onChangeState={onChangeState}
/>
<TextInputField
type={"password"}
label={"Password"}
value={password}
onChangeState={onChangeState}
/>
<TextInputField
type={"password"}
label={"Confirm password"}
value={confirmPassword}
onChangeState={onChangeState}
/>
<input type="submit" className="button centered"/>
</div>
</form>
)
}
export default CreateAccountFormWrapper;
Queries:
import { gql } from "@apollo/client";
const TEST = gql`
query Test($id: Int!) {
test(id: $id) {
id
}
}
`;
const CREATE_CLIENT_ACCOUNT = gql`
mutation CreateClientAccount($name: String!, $email: String!, $password: String!) {
createClientAccount(name: $name, email: $email, password: $password) {
id
auth
}
}
`;
export { TEST, CREATE_CLIENT_ACCOUNT };
Schema:
const Test = new GraphQLObjectType({
name: 'Test',
fields: () => ({
id: { type: GraphQLInt }
})
})
const AccountType = new GraphQLObjectType({
name: 'Account',
fields: () => ({
id: { type: GraphQLID },
name: { type: GraphQLString },
email: { type: GraphQLString }
)}
)}
const RootQuery = new GraphQLObjectType({
name: 'RootQueryType',
fields: {
test: {
type: Test,
args: {
id: { type: GraphQLInt }
},
resolve(parent, args) {
console.log(args.id);
return {
id: args.id
}
}
}
}
)}
const Mutation = new GraphQLObjectType({
name: 'Mutation',
fields: {
createClientAccount: {
type: AccountType,
args: {
name: { type: new GraphQLNonNull(GraphQLString) },
email: { type: new GraphQLNonNull(GraphQLString) },
password: { type: new GraphQLNonNull(GraphQLString) }
},
async resolve(parent, args) {
return await account.createAccount({
name: args.name,
email: args.email,
password: args.password
});
}
}
}
})
module.exports = new GraphQLSchema({
query: RootQuery,
mutation: Mutation
})
Top comments (0)