0

我正在使用 react、nextjs 和 wpgraphql 构建一个无头 wordpress 网站。我正在尝试创建一个突变来注册用户，但在提交表单后出现以下错误：

Error: GraphQL error: Unknown argument "username" on field "registerUser" of type "RootMutation".
GraphQL error: Unknown argument "email" on field "registerUser" of type "RootMutation".
GraphQL error: Unknown argument "clientMutationId" on field "registerUser" of type "RootMutation".
GraphQL error: Field "registerUser" argument "input" of type "RegisterUserInput!" is required but not provided.

当我使用 GraphiQL 在 wordpress 中直接测试突变时，一切都按预期工作：

mutation registerUser {
  registerUser(input: {username: "new_user", clientMutationId: "39slh", email: "test@test.com"}) {
    user {
      id
      name
    }
  }
}

这是我正在使用的代码：

import React, { useState } from 'react';
import { useMutation } from '@apollo/react-hooks';
import { gql } from 'apollo-boost';
import Layout from '../components/Layout';
import withData from '../lib/apollo';

const CREATE_USER = gql`
mutation registerUser {
    registerUser(input: {$name, $mutation, $email}) {
      user {
        id
        name
      }
    }
  }`;

const Login = () => {
    const [email, setEmail] = useState('');
    const [name, setName] = useState('');
    const mutation = 'reslkj3sd';
    const [createUser, { loading, error }] = useMutation(CREATE_USER);

    const updateEmail = (value) => {
        setEmail(value);
    };
    const updateName = (value) => {
        setName(value);
    };

    const handleCreateUser = (event) => {
        event.preventDefault();
        createUser({ variables: { name, mutation, email } });
    };

    return (
        <Layout>
            <form onSubmit={handleCreateUser}>
                <input type="email" value={email} onChange={(e) => { updateEmail(e.target.value) }} />
                <input type="text" value={name} onChange={(e) => { updateName(e.target.value) }} />
                <input type="submit"></input>
                {error && <p>{error.message}</p>}
            </form>
        </Layout>
    );
};

export default withData(Login);

我很感激我能得到的任何帮助来让它工作。

4

1 回答 1

1

这些 GraphQL 变量需要在传入之前进行定义。将 GraphQL 模式视为一个对象。在返回行上注入的值总是使用 GraphQL 值在其前一行中定义。例如

// query DocumentNode
const GET_ALL_AUTHORS = gql`
    query GetAllAuthors(
        $order: OrderEnum!
        $field: PostObjectsConnectionOrderbyEnum!
        $first: Int!
    ) {
        AllAuthors(
            where: { orderby: { field: $field, order: $order } }
            first: $first
        ) {
            edges {
                node {
                    id
                    name
                    firstName
                    lastName
                    avatar {
                        url
                        size
                        height
                        width
                    }
                    slug
                    locale
                }
            }
        }
    }
`;

// your variables to pass into the query hook
const GetAllAuthorsQueryVars = {
    first: 20,
    field: PostObjectsConnectionOrderbyEnum.SLUG,
    order: OrderEnum.ASC
};
  • 但是，您可以将表单派生数据直接传递到 GetAllAuthors 定义的变量中，只要所述数据满足其定义即可。

继续进行用户注册。这种突变绝对是巨大的。我将尝试简化它，但您确实需要一个密码对象，并且要通过 WPGraphQL 提供该密码对象，您应该安装 WPGraphQL JWT 插件并按照步骤在 wp-config.php 文件中配置 JWT Secret。配置完成后，您可以通过使用您的 wordpress 凭据执行登录突变来生成刷新令牌。它还将返回一个相对短暂的 Auth 令牌，并且依赖于 Refresh 令牌来永久重新生成它。配置此插件后，请确保将返回的令牌存储在 cookie 或其他内容中。如果近年来通过的超级严格的欧盟法律适用于您，请务必不要在您的 cookie 中存储电子邮件或任何其他违反该法律的信息。

无论如何，使用您的凭据（加上密码变量）：


const REGISTER_USER = gql`mutation registerUser($username: String!, $password: String!, email: String!, $clientMutationId: String!) {
  registerUser(input: {username: $username, clientMutationId: $clientMutationId email: $email, password: $password}) {
    clientMutationId
        user {
      id
      name
            email
    }
  }
}`

您可以将这些值直接注入到 registerUser 定义中，也可以练习关注点分离并定义一个变异变量对象，如下所示：

const GetMutationInputVars = {
    username: inputE1,
    clientMutationId: inputE2,
    email: inputE3,
    password: inputE4
};

这应该让你站稳脚跟。

下面是一个例子，说明了这种特定突变的范围有多广，这很可能在大型项目的范围之外是不必要的。

import { gql } from '@apollo/client';

const NEW_USER = gql`
    mutation RegisterUser(
        $locale: String
        $refreshJwtUserSecret: Boolean
        $nickname: String
        $clientMutationId: String!
        $username: String!
        $password: String!
        $email: String!
        $firstName: String
        $lastName: String
        $registered: String!
    ) {
        registerUser(
            input: {
                locale: $locale
                clientMutationId: $clientMutationId
                refreshJwtUserSecret: $refreshJwtUserSecret
                username: $username
                password: $password
                email: $email
                firstName: $firstName
                lastName: $lastName
                registered: $registered
                nickname: $nickname
            }
        ) {
            clientMutationId
            user {
                id
                databaseId
                username
                email
                firstName
                lastName
                registeredDate
                avatar {
                    foundAvatar
                    url
                }
                jwtAuthExpiration
                jwtUserSecret
                jwtRefreshToken
                nickname
                locale
                slug
                uri
                roles {
                    nodes {
                        capabilities
                    }
                }
            }
        }
    }
`;

export default NEW_USER;
于 2021-02-13T10:30:02.843 回答