javascript - React、Graphql スキーマ型宣言

私はReactとApollo:generateでgraphqlを使用して、graphqlスキーマから型を作成しています。

私はデータを出力するために、react-apollo-hooks の useQuery も使用しています。

すべてが正常に動作しているようで、データが出力されているのが見えます

私の問題は、生成された型をどのように宣言して、それからVCコードでインテリセンスを得るかがわからないことです。

クエリ

import { gql } from 'apollo-boost';

export const GET_ALL_RECIPES = gql`

  query RecipesData{
    recipe{
      _id
      name
      description
    }
  }
`

生成された型

/* tslint:disable */
/* eslint-disable */
// This file was automatically generated and should not be edited.

// ====================================================
// GraphQL query operation: RecipesData
// ====================================================

export interface RecipesData_recipe {
  __typename: "Recipe";
  _id: string | null;
  name: string | null;
  description: string | null;
}

export interface RecipesData {
  recipe: (RecipesData_recipe | null)[] | null;
}   

App.tsx

import React from 'react';
import './App.css';

import { useQuery } from 'react-apollo-hooks';
import { GET_ALL_RECIPES } from '../queries';

import { RecipesData_recipe } from '../generated/RecipesData';

const App: React.FC<RecipesData> = () => {

  const { data, loading } = useQuery(GET_ALL_RECIPES, {
    suspend: false
  })

  if (loading || !data) return <div>Loading</div>

  return (
    <ul>
      {data.recipe.map((recipe) =>
        <li key={recipe._id}>{recipe.name}</li>
      )}
    </ul>
  );
}

export default App; 

App.tsxでrecipe.nameのインテリセンスを使用するために、RecipesDataまたはRecipesData_recipeを正しく宣言するにはどうすればいいですか

回答 #1

ドキュメントは常に役立ちます。生成された ...Data インターフェースおよび/または ...Vars インターフェース（クエリを実行する場合）をインポートし、それを使って useQuery をキャストしてください。

import { RecipesData } from '../generated/RecipesData';

const { data, loading } = useQuery<RecipesData>(GET_ALL_RECIPES, {
  suspend: false
});

それから、コンポーネントをよりクリーンな方法で単純に返します：

return (
  <div>
    {loading ? (
      <p>Loading ...</p>
    ) : (
      <ul>
        {data && data.recipe.map(recipe => (
          <li key={recipe._id}>{recipe.name}</li>
        ))}
      </ul>
    )}
  </div>
);