Svelte 中的 GraphQL 突变以在 Wordpress 中提交评论

Question

如何使用 Graphql 在 svelte 中提交评论？
我的 svelte 代码是这样的


<script>
    let commenterMessage = '';
    export let status = false;

    export async function submitComment() {
        $: commenterMessage;
        const graphcms = new GraphQLClient(import.meta.env.VITE_GRAPHCMS_URL, {
            headers: {}
        });

        const query = gql`
            mutation CREATE_COMMENT {
                createComment(
                    input: {
                        commentOn: 115
                        content: ${commenterMessage}
                        author: "Sarah Jason"
                    }
                ) {
                    success
                    comment {
                        id
                        content
                        author {
                            node {
                                name
                            }
                        }
                    }
                }
            }
        `;

        const { createComment } = await graphcms.request(query);
        return {
            props: {
                status: createComment.success
            }
        };
    }
</script>

这是我使用来自用户的绑定值的形式：

<form id="comment_form" method="post">
    <div class="group-val ct-gr">
        <textarea name="message" placeholder="Comment" bind:value={commenterMessage} />
    </div>
    <a
        href="#"
        class="btn fill"
        on:click|preventDefault={submitComment}
        data-text="Add Comment">
        Add Comment
    </a>
</form>

我在 gql 查询中遇到 ${commenterMessage} 错误。
这是我在控制台中看到的错误：

未捕获（承诺）错误：语法错误：无法解析意外字符“.”。：{"response":{"errors":[{"message":"Syntax Error: Cannot parse the unexpected character \".\".","extensions":{"category":"graphql"},"locations":[{"line":6,"column": 21}]}],"extensions":{"debug":[{"type":"DUPLICATE_FIELD","message":"You cannot register duplicate fields on the same Type. The field 'theme' already exists on the type 'RootQuery'. Make sure to give the field a unique name.","field_name" :"theme","type_name":"RootQuery","stack":["E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\Registry\TypeRegistry.php:1025","E:\wamp64\www\simplecv\cms\wp-includes\class-wp-hook.php:305","E:\wamp64\www\simplecv\cms\wp-includes\plugin.php:189","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\Type\WPObjectType.php:226", "E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\Type\WPObjectType.php:126","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\vendor\webonyx\graphql-php\src\Type\Definition\FieldDefinition.php:96","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\vendor\webonyx\graphql-php\src\Type\Definition\TypeWithFields.php:26","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\vendor\webonyx\graphql-php\src\Type\Definition\TypeWithFields.php:61","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\Utils\InstrumentSchema.php:32","E:\wamp64\www\simplecv\cms\wp-includes\class-wp-hook.php:303","E:\wamp64\www\simplecv\cms\wp-includes\plugin.php:189","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\Registry\TypeRegistry.php:826","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\Registry\SchemaRegistry.php:40","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\WPGraphQL.php:601","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\Request.php:146","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\Router.php:464","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\Router.php:270","E:\wamp64\www\simplecv\cms\wp-includes\class-wp-hook.php:303","E:\wamp64\www\simplecv\cms\wp-includes\class-wp-hook.php:327","E:\wamp64\www\simplecv\cms\wp-includes\plugin.php:518","E:\wamp64\www\simplecv\cms\wp-includes\class-wp.php:388","E:\wamp64\www\simplecv\cms\wp-includes\class-wp.php:750","E:\wamp64\www\simplecv\cms\wp-includes\functions.php:1291","E:\wamp64\www\simplecv\cms\wp-blog-header.php:16","E:\wamp64\www\simplecv\cms\index.php:17"]},{"type":"DUPLICATE_FIELD","message":"You cannot register duplicate fields on the same Type. The field 'categories' already exists on the type 'RootQuery'. Make sure to give the field a unique name.","field_name":"categories","type_name":"RootQuery","stack":["E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\Registry\TypeRegistry.php:1025","E:\wamp64\www\simplecv\cms\wp-includes\class-wp-hook.php:305","E:\wamp64\www\simplecv\cms\wp-includes\plugin.php:189","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\Type\WPObjectType.php:226","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\Type\WPObjectType.php:126","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\vendor\webonyx\graphql-php\src\Type\Definition\FieldDefinition.php:96","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\vendor\webonyx\graphql-php\src\Type\Definition\TypeWithFields.php:26","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\vendor\webonyx\graphql-php\src\Type\Definition\TypeWithFields.php:61","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\Utils\InstrumentSchema.php:32","E:\wamp64\www\simplecv\cms\wp-includes\class-wp-hook.php:303","E:\wamp64\www\simplecv\cms\wp-includes\plugin.php:189", "E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\Registry\TypeRegistry.php:826","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\Registry\SchemaRegistry.php:40","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\WPGraphQL.php:601","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\Request.php:146","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\Router.php:464","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\Router.php:270","E:\wamp64\www\simplecv\cms\wp-includes\class-wp-hook.php:303","E:\wamp64\www\simplecv\cms\wp-includes\class-wp-hook.php:327","E:\wamp64\www\simplecv\cms\wp-includes\plugin.php:518","E:\wamp64\www\simplecv\cms\wp-includes\class-wp.php:388","E:\wamp64\www\simplecv\cms\wp-includes\class-wp.php:750","E:\wamp64\www\simplecv\cms\wp-includes\functions.php:1291","E:\wamp64\www\simplecv\cms\wp-blog-header.php:16","E:\wamp64\www\simplecv\cms\index.php:17"]},{"type":"DUPLICATE_FIELD","message":"You cannot register duplicate fields on the same Type. The field 'themes' already exists on the type 'RootQuery'. Make sure to give the field a unique name.","field_name":"themes","type_name":"RootQuery","stack":["E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\Registry\TypeRegistry.php:1025","E:\wamp64\www\simplecv\cms\wp-includes\class-wp-hook.php:305","E:\wamp64\www\simplecv\cms\wp-includes\plugin.php:189","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\Type\WPObjectType.php:226","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\Type\WPObjectType.php:126","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\vendor\webonyx\graphql-php\src\Type\Definition\FieldDefinition.php:96","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\vendor\webonyx\graphql-php\src\Type\Definition\TypeWithFields.php:26","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\vendor\webonyx\graphql-php\src\Type\Definition\TypeWithFields.php:61","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\Utils\InstrumentSchema.php:32","E:\wamp64\www\simplecv\cms\wp-includes\class-wp-hook.php:303","E:\wamp64\www\simplecv\cms\wp-includes\plugin.php:189","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\Registry\TypeRegistry.php:826","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\Registry\SchemaRegistry.php:40","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\WPGraphQL.php:601","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\Request.php:146","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\Router.php:464","E:\wamp64\www\simplecv\cms\wp-content\plugins\wp-graphql\src\Router.php:270","E:\wamp64\www\simplecv\cms\wp-includes\class-wp-hook.php:303", "E:\wamp64\www\simplecv\cms\wp-includes\class-wp-hook.php:327","E:\wamp64\www\simplecv\cms\wp-includes\plugin.php:518","E:\wamp64\www\simplecv\cms\wp-includes\class-wp.php:388","E:\wamp64\www\simplecv\cms\wp-includes\class-wp.php:750","E:\wamp64\www\simplecv\cms\wp-includes\functions.php:1291","E:\wamp64\www\simplecv\cms\wp-blog-header.php:16","E:\wamp64\www\simplecv\cms\index.php:17"]}]},"status":200,"headers":{"map":{"content-length":"7395","content-type":"application/json; charset=UTF-8"}}},"request":{"query":"\n\t\t\tmutation CREATE_COMMENT {\n\t\t\t\tcreateComment(\n\t\t\t\t\tinput: {\n\t\t\t\t\t\tcommentOn: 115\n\t\t\t\t\t\tcontent: 你好。这是来自表单的消息。\n\t\t\t\t\t\tauthor: \"ali akizade\"\n\t\t\t\t\t}\n\t\t\t\t) {\n\t\t\t\t\tsuccess\n\t\t\t\t\tcomment {\n\t\t\t\t\t\tid\n\t\t\t\t\t\tcontent\n\t\t\t\t\t\tauthor {\n\t\t\t\t\t\t\tnode {\n\t\t\t\t\t\t\t\tname\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t"}}

如何使用用户在表单输入中输入的值？

Answer 1

问题是content: ${commenterMessage}我应该这样写：

content: "${commenterMessage}"

因为内容是 String 我们应该用双引号括起来。

Svelte 中的 GraphQL 突变以在 Wordpress 中提交评论

GraphQL mutation in Svelte to submit a comment in Wordpress

wordpress

graphql

svelte

wp-graphql