React.js Apollo 查询和突变错误以及未定义的返回

Question

我在使用 React.js、Apollo 和 GraphQL 配置查询和突变时遇到问题。下面我有一个带有查询和突变的组件。这些查询和突变适用于 GraphiQL，但不适用于我的 React 应用程序。查询返回未定义，并且突变给我一个状态代码 400 错误。在我的 Node.js API 中，我有一个 console.log() 语句，用于打印传递给查询的值，以便查询正确接收请求，并且只是不返回值。该突变也适用于 GraphiQL，但不适用于我的 React 应用程序。下面是我的代码。任何帮助将不胜感激。谢谢你。

成分：

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;

查询：

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

架构：

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

Answer 1

不正确的

useQuery

解构：当您使用

useQuery

时，返回的数据不是

testData

，而是应该被解构为

{ data, loading, error }

。您使用的是

testData

、

testLoading

、

testError

，它们不是

useQuery

返回的正确属性名称。

因此要使用您想要使用的数据，您可以这样做

{ data:testData, loading:testLoading, error:testError }

提示：我建议您阅读一次文档，并考虑在初始阶段编写错误处理和测试。 https://www.apollographql.com/docs/react/data/queries