How to submit a comment in svelte using Graphql?
My svelte code is like this
<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>
And this is the form that I use binding values from user:
<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>
I have and error for ${commenterMessage} in gql query.
This is the error that I see in console:
Uncaught (in promise) Error: Syntax Error: Cannot parse the unexpected character ".".: {"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: Hello. This is the message from the form.\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"}}
How can I use the value that user types in form input?
The problem was content: ${commenterMessage} that I should have written like this:
content: "${commenterMessage}"
as the content is a String we should surround it with double quotes.