Блог

Как отправить комментарий в svelte с помощью Graphql?
Мой стройный код выглядит так

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

У меня есть и ошибка ${commenterMessage} в запросе gql.
Это ошибка, которую я вижу в консоли:

Не пойманный (в обещании) Ошибка: Синтаксическая ошибка: Не удается проанализировать неожиданный символ ".".: {"ответ":{"ошибки":[{"сообщение":"Синтаксическая ошибка: Не удается проанализировать неожиданный символ".".","extensions":{"category":"graphql"},"locations":[{"line":6,"column":21}]}],"extensions":{"debug":[{"type":"DUPLICATE_FIELD","message":"Вы не можете зарегистрировать повторяющиеся поля одного и того же типа. Поле "тема" уже существует для типа "Корневой запрос". Обязательно придайте полю уникальный 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":"ntttmutation CREATE_COMMENT {nttttcreateComment(ntttttinput: {nttttttcommentOn: 115nttttttcontent: Hello. This is the message from the form.nttttttauthor: "ali akizade"nttttt}ntttt) {ntttttsuccessntttttcomment {nttttttidnttttttcontentnttttttauthor {ntttttttnode {nttttttttnamenttttttt}ntttttt}nttttt}ntttt}nttt}ntt"}}

Как я могу использовать значение, которое пользователь вводит при вводе формы?

Проблема заключалась content: ${commenterMessage} в том, что я должен был написать так:

 content: "${commenterMessage}"
 

поскольку содержимое представляет собой строку, мы должны заключить ее в двойные кавычки.