クエリ変数

GraphQLコンテキストにおける変数とは何でしょうか。

GraphQLには、クエリから動的な値を除外し、別のディクショナリとして渡すための最適な方法があります。これらの値を変数と呼びます。ここでは、挿入するオブジェクトをミューテーションとして定義していきます。

それでは、使用するgraphql mutationを定義しましょう。

src/components/Todo/TodoInput.js を開いて以下のコードを追加します。

githubsrc/components/Todo/TodoInput.js
import React from 'react';
+ import { gql } from "@apollo/client";
+ const ADD_TODO = gql `
+ mutation ($todo: String!, $isPublic: Boolean!) {
+ insert_todos(objects: {title: $todo, is_public: $isPublic}) {
+ affected_rows
+ returning {
+ id
+ title
+ created_at
+ is_completed
+ }
+ }
+ }
+ `;
const TodoInput = ({isPublic=false}) => {
return (
<form className="formInput" onSubmit={(e) => {
e.preventDefault();
}}>
<input
className="input"
placeholder="What needs to be done?"
/>
<i className="inputMarker fa fa-angle-right" />
</form>
);
};
export default TodoInput;

このmutationは何をするのでしょうか。

このmutationは、todoタイプの1つとして渡される$objects variableで、 todos テーブルに挿入されます。

完璧です。最初のgraphql mutationを定義しました。

Did you find this page helpful?
Start with GraphQL on Hasura for Free
  • ArrowBuild apps and APIs 10x faster
  • ArrowBuilt-in authorization and caching
  • Arrow8x more performant than hand-rolled APIs
Promo
footer illustration
Brand logo
© 2024 Hasura Inc. All rights reserved
Github
Titter
Discord
Facebook
Instagram
Youtube
Linkedin