Data Masking with Apollo / GraphQL Anywhere

createFragmentContainer.js

import React from 'react';
import { filter } from 'graphql-anywhere';
import hoistNonReactStatic from 'hoist-non-react-statics';

/*
 * createFragmentContainer returns a component which expects props that match
 * WrappedComponent's fragment names, and provides data masking
 */

export default function createFragmentContainer(WrappedComponent) {
  const Enhanced = props => {
    const fragmentKeys = Object.keys(WrappedComponent.fragments);
    const fragmentDataProps = fragmentKeys.reduce((accProps, fragmentKey) => {
      const fragment = WrappedComponent.fragments[fragmentKey];
      return {
        ...accProps,
        // `filter` from graphql-anywhere is doing the heavy lifting here of masking
        [fragmentKey]: filter(fragment, props[fragmentKey] || {}),
      };
    }, {});

    return <WrappedComponent {...props} {...fragmentDataProps} />;
  };

  // retain fragments defined statically on WrappedComponent
  hoistNonReactStatic(Enhanced, WrappedComponent);

  return Enhanced;
}