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

example.js

import React from 'react'
import gql from 'graphql-tag';
import { Query } from 'react-apollo'
import { UserOverview } from './user-overview';

// The fragment is composed here, and 
const QUERY = gql`
  query getData {
    currentUser {
        id            /* These fields, will not flow down to child components ...*
        emailAddress     unless otherwise specified by the child's fragment.
        phoneNumber   */
        ...UserOverView_fragment // This data will be the only data that `UserOverview` has access to.
        ...OtherComponent_fragment // This data will be the only data that `OtherComponent` has access to.
    }
  }
${UserOverview.fragments.user}
${OtherComponent.fragments.user}
`

export default function ParentComponent() {
  return (
    <Query query={QUERY}>
      {({ data, }) => (
          <React.Fragment>
            <UserOverview user={data.currentUser} />
            <OtherComponent user={data.currentUser} />
          </React.Fragment>
      )}
    </Query>
  ) 
}

other-component.js

import React from 'react'
import gql from 'graphql-tag';
import withMaskedData from './createFragmentContainer';

const OtherComponentUI = ({ user }) => (
      <div>
        <span style={{ backgroundColor: user.favoriteColor.hex } className='swatch' />
        <span>{user.favoriteColor.name}</span>
      </div>
)

// Define your fragments to match your expected props.
OtherComponentUI.fragments = {
  user: gql`
    fragment OtherComponent_fragment on User {
      id
      profile {
        favoriteColor {
          name
          hex
        }
      }
    }
  `
}
// This wrapped component will have its data masked.
export const OtherComponent = withMaskedData(OtherComponent);

user-overview.js

import React from 'react';
import gql from 'graphql-tag';
import withMaskedData from './createFragmentContainer';

const UserOverviewComponent = ({ user }) => (
    <div>
      <h3>{user.fullName}</h3>
      <h5>{user.profile.birthDate}</h5>
    </div>
);

// Define your fragments to match your expected props.
UserOverviewComponent.fragments = {
  user: gql`
    fragment UserOverView_fragment on User {
      id
      fullName
      profile {
        birthDate
      }
    }
  `
}
// This wrapped component will have its data masked.
export const UserOverview = withMaskedData(UserOverviewComponent);