バックエンドからデータを取得するためのGraphQLコールは、organismsコンポーネントに限定され、Apollo Clientを利用しています。

クエリやミューテーションを作成する

最初のステップは、使用するクエリまたはミューテーションを作成することです。(クエリーまたはミューテーションがすでに生成され、アプリの他の場所で使用されている場合、このステップはスキップ可能です。src/gql/graphql-client-api.tsxにあるGraphQL生成コードを参照してください)。

コンポーネントのディレクトリに、index.tsxファイルと一緒にqueries.tsファイルを作成します。ここでは、新しいクエリや ミューテーションをすべて宣言し、エクスポートします。 利用可能なクエリや ミューテーションについて、バックエンドのコードを参照してください。

では、GraphQLファイルを再生成する必要があります：

yarn gql

より詳細な情報についてはApollo Clientのドキュメントを参照してください。 しかし、queries.tsファイルで見られる一般的な構文は次のとおりです：

export const CHANGE_SOMETHING = gql`
    mutation ChangeSomething(
        $value: Any
        $id: ID!
    ) {
        updateSomething(
            input: {
                id: $id
                value: $value
            }
        ) {
            something {
                ...
            }
        }
    }
`;

インポートと使用

別のhooks.tsファイルでは、クエリ/ミューテーションをインポートし、それを呼び出すことになります。よくあるパターンとしては、クエリ/ミューテーションを使ったコールバック関数が、他のorganismコンポーネントへのプロップとして渡されたり、moleculeコンポーネントで使用されたりすることがあります

カスタムフックファイルからクエリ/文字列を使用すると、次のようになります:

import { useChangeSomethingMutation } from "@reearth/gql;

...
// from within hooks function
const [changeSomethingMutation] = useChangeSomethingMutation();

// then, use changeSomethingMutation as a normal function where needed

注意：クエリ/ミューテーションをmolecule / atomコンポーネントに直接渡すことはできません。