graphqlのクエリをfilterするにはどうすればよいか？

React、apollo-clientを使って、フロントエンドを実装しているとする
子コンポーネントにデータを渡すときにすべてのデータを渡したくない場合がある
どのように対処できるか？

graphql-anywhereのfilterを使う

apolloのチュートリアルをコピーしてサンプルを作成した
https://github.com/tagty/space-explorer/tree/graphql-anywhere
ロケットの打ち上げ一覧ページのコードを読む

const Launches: React.FC<LaunchesProps> = () => {
  const { data, loading, error, fetchMore } = useQuery<
    GetLaunchListTypes.GetLaunchList,
    GetLaunchListTypes.GetLaunchListVariables
  >(GET_LAUNCHES);

  return (
    <Fragment>
      {data.launches &&
        data.launches.launches &&
        data.launches.launches.map((launch: any) => (
          <LaunchTile
            key={launch.id}
            launch={launch}
          />
        ))}
    </Fragment>
  );
};

const LaunchTile: React.FC<LaunchTileProps> = ({ launch }) => {
  const { id, mission, rocket } = launch;
  return (
    <StyledLink
      to={`/launch/${id}`}
      style={{
        backgroundImage: getBackgroundImage(id),
      }}
    >
      <h3>{mission ? mission.name : ""}</h3>
      <h5>{rocket && rocket.name}</h5>
    </StyledLink>
  );
};

Launches から LaunchTile に launch を渡しているが、 launch の全てのデータを利用しているわけではない

LaunchTile で利用したいデータのみを渡すことはできるだろうか？
graphql-anywhere の filter を使えば、ドキュメントをもとにでデータをフィルタすることができる

import gql from "graphql-tag";
import { filter } from "graphql-anywhere";

const LAUNCH_TILE_FRAGMENT = gql`
  fragment LaunchTileFragment on Launch {
    id
    rocket {
      id
      name
    }
    mission {
      name
      missionPatch
    }
  }
`;

const Launches: React.FC<LaunchesProps> = () => {
  const { data, loading, error, fetchMore } = useQuery<
    GetLaunchListTypes.GetLaunchList,
    GetLaunchListTypes.GetLaunchListVariables
  >(GET_LAUNCHES);

  return (
    <Fragment>
      {data.launches &&
        data.launches.launches &&
        data.launches.launches.map((launch: any) => (
          <LaunchTile
            key={launch.id}
            launch={filter(LAUNCH_TILE_FRAGMENT, launch)}
          />
        ))}
    </Fragment>
  );
};

まとめ

今回は、 graphql-anywhere の filter を使って、データをフィルタする方法を紹介した

tagty/graphql-anywhere.md

graphqlのクエリをfilterするにはどうすればよいか？

graphql-anywhereのfilterを使う

まとめ