Skip to content

Instantly share code, notes, and snippets.

@tagty
Last active June 14, 2020 11:37
Show Gist options
  • Save tagty/35bc17335e06d9fc063acfbd0b46eaa3 to your computer and use it in GitHub Desktop.
Save tagty/35bc17335e06d9fc063acfbd0b46eaa3 to your computer and use it in GitHub Desktop.
graphqlのクエリをfilterするにはどうすればよいか?

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

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

graphql-anywhereのfilterを使う

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 から LaunchTilelaunch を渡しているが、 launch の全てのデータを利用しているわけではない

スクリーンショット 2020-06-14 18 14 17

  • 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>
  );
};

スクリーンショット 2020-06-14 18 15 58

まとめ

  • 今回は、 graphql-anywherefilter を使って、データをフィルタする方法を紹介した
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment