WPGraphQL useMutation GraphQL 錯誤：“RootMutation”類型的“registerUser”字段上的未知參數“用戶名”

Question

我正在使用 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);

我很感激我能得到的任何幫助來讓它工作。

Answer 1

那些 GraphQL 變量需要在傳入之前進行定義。將 GraphQL 模式視為 object。 返回行上注入的值始終使用前一行中的 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 定義的變量中，只要所述數據滿足其定義即可。

繼續進行用戶注冊。 這種突變絕對是巨大的。 I will try to simplify it, but you do need a password object, and to provide that via WPGraphQL you should install the WPGraphQL JWT plugin and follow the steps to configure a JWT Secret in your wp-config.php file. 配置完成后，您可以通過使用 wordpress 憑證執行登錄突變來生成刷新令牌。 它還將返回一個相對短暫的 Auth 令牌，並且依賴於 Refresh 令牌來永久重新生成它。 配置此插件后，請確保將返回的令牌存儲在 cookies 或其他內容中。 如果近年來通過的超級嚴格的歐盟法律適用於您，請務必不要在您的 cookie 中存儲 email 或任何其他違反該法律的信息。

無論如何，使用您的憑據（加上密碼變量）：

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 定義中，也可以練習關注點分離並定義突變變量 object，如下所示：

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

這應該讓你站穩腳跟。

下面是一個例子，說明這種特殊突變的范圍有多廣，除了大型項目的 scope 之外，這很可能是不必要的。

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;