How to use graphql-anywhere - 10 common examples

return cxs(el)(props => {
        try {
            const parsedQuery = isGqlQuery(query)
                ? query
                : internalGql(buildQuery(interleave(query, interpolations), props).join(""));

            return smoosh(graphql(resolver, parsedQuery, styles));
        } catch (e) {
            // eslint-disable-next-line no-console
            console.error("Not a valid gql query. Did you forget a prop?");
            return {};
        }
    });
};

onSuccess?: any;
  plan_id?: string;
  subscribeToPremium: any; // FIXME: Type
}

interface BillingFormState {
  mode: string;
  errorMessage: string;
  operations: any[];
  plan_id: string;
  coupon_code: string;
}

class BillingForm extends PureComponent {
  static propTypes = {
    me: propType(billingFormFragment).isRequired, // TODO: Figure out how to move this to TS
  };

  static defaultProps = {
    plan_id: null,
    onSuccess: () => null,
  };

  state = {
    mode: 'resting',
    errorMessage: null,
    operations: [],
    plan_id: this.props.me.customer.plan.id,
    coupon_code: '',
  };

  componentDidMount() {

const context: ReadStoreContext = {
    // Global settings
    store,
    returnPartialData,
    customResolvers: (config && config.customResolvers) || {},
    // Flag set during execution
    hasMissingField: false,
  };

  const rootIdValue = {
    type: 'id',
    id: rootId,
    previousResult,
  };

  const result = graphqlAnywhere(
    readStoreResolver,
    query,
    rootIdValue,
    context,
    variables,
    {
      fragmentMatcher: fragmentMatcherFunction,
      resultMapper,
    },
  );

  return {
    result,
    complete: !context.hasMissingField,
  };
}

props: ({ data }) => {
      if (data.error || data.loading) {
        return {
          error: data.error,
          timeline: [], // empty timeline to avoid to block the whole app until timeline data is loaded
          timelineLoading: data.loading
        };
      }

      const filteredPhases = filter(TimelineQuery, { timeline: data.timeline });
      const phasesForStore = filteredPhases.timeline.map(phase => ({
        id: phase.id,
        identifier: phase.identifier,
        isThematicsTable: phase.isThematicsTable,
        start: phase.start,
        end: phase.end,
        image: phase.image,
        title: phase.title,
        description: phase.description
      }));
      return {
        error: data.error,
        timelineLoading: data.loading,
        timeline: phasesForStore
      };
    }

};
        chain.get(key).on(updater, true);
      });
      return t;
    } else {
      ref[key] = ref[key] || {};
      return {
        chain: chain.get(key),
        subscribe,
        path: [...path, key],
        ref: ref[key]
      };
    }
  };

  const graphqlOut = graphql(
    resolver,
    query,
    { path: [], ref: resultValue, chain: gun },
    null,
    null,
    {
      deferrableOrImmediate,
      arrayOrDeferrable
    }
  );
  const thunk = thunkish(function(triggerUpdate) {
    triggerUpdate(resultValue);
    if (graphqlOut.isThunk) {
      graphqlOut(function(actualRes) {
        triggerUpdate(resultValue); // TODO: Figure out how to use actualRes instead of tracking resultValue
      });

import { LabelledInput, Label, Input, Textarea } from 'react/components/UI/Inputs';

import createGroupQuery from 'react/components/CreateGroup/queries/createGroup';

import createGroupFragment from 'react/components/CreateGroup/fragments/createGroup';

import createGroupMutation from 'react/components/CreateGroup/mutations/createGroup';
import addChannelMemberMutation from 'react/components/CreateGroup/mutations/addChannelMember';
import addGroupUsersMutation from 'react/components/CreateGroup/mutations/addGroupUsers';
import inviteUserMutation from 'react/components/CreateGroup/mutations/inviteUser';
import setHasSeenNewGroupExplanationMutation from 'react/components/CreateGroup/mutations/setHasSeenNewGroupExplanation';

class CreateGroup extends Component {
  static propTypes = {
    data: PropTypes.shape({
      me: propType(createGroupFragment),
    }).isRequired,
    channel_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    onClose: PropTypes.func.isRequired,
    createGroup: PropTypes.func.isRequired,
    addChannelMember: PropTypes.func.isRequired,
    addGroupUsers: PropTypes.func.isRequired,
    inviteUser: PropTypes.func.isRequired,
    setHasSeenNewGroupExplanation: PropTypes.func.isRequired,
  }

  static defaultProps = {
    channel_id: null,
  }

  state = {
    mode: 'resting',

}
`

const Container = styled.div`
  margin-left: ${props => props.theme.space[3]};
  max-height: 30vmin;
  ${overflowScrolling}
`

const LearnMoreLink = styled.a`
  font-weight: bold;
`

class MyGroupLinks extends Component {
  static propTypes = {
    me: propType(myGroupLinksFragment).isRequired,
    toggleMyGroupsDropdownVisibility: PropTypes.func.isRequired,
  }

  toggle = e => {
    e.preventDefault()

    const { toggleMyGroupsDropdownVisibility, me } = this.props
    const value = !me.is_my_groups_dropdown_hidden

    return toggleMyGroupsDropdownVisibility({
      variables: {
        flags: [
          {
            name: 'is_my_groups_dropdown_hidden',
            value,
          },

import blockLightboxImageFragment from 'react/components/BlockLightbox/components/BlockLightboxImage/fragments/blockLightboxImage';

import Text from 'react/components/UI/Text';
import Link from 'react/components/UI/Link';

const Image = styled.img`
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: scale-down;
`;

export default class BlockLightboxImage extends PureComponent {
  static propTypes = {
    block: propType(blockLightboxImageFragment).isRequired,
    layout: PropTypes.oneOf(['DEFAULT', 'FULLSCREEN']).isRequired,
  }

  render() {
    const { block, layout } = this.props;

    return (

import { graphql, compose } from 'react-apollo'

import WithLoginStatus from 'v2/hocs/WithLoginStatus'

import followingQuery from 'v2/components/FollowButton/queries/following'
import followableFragment from 'v2/components/FollowButton/fragments/followable'
import followMutation from 'v2/components/FollowButton/mutations/follow'
import unfollowMutation from 'v2/components/FollowButton/mutations/unfollow'

class FollowButton extends Component {
  static propTypes = {
    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
    type: PropTypes.oneOf(['USER', 'GROUP', 'CHANNEL']).isRequired,
    data: PropTypes.shape({
      loading: PropTypes.bool.isRequired,
      followable: propType(followableFragment),
    }).isRequired,
    follow: PropTypes.func.isRequired,
    unfollow: PropTypes.func.isRequired,
    isLoggedIn: PropTypes.bool.isRequired,
    children: PropTypes.func,
  }

  static defaultProps = {
    children: ({ isFollowed }) =>
      ({ true: 'Unfollow', false: 'Follow' }[isFollowed]),
  }

  toggleFollow = async e => {
    e.preventDefault()

    const {

display: inline-block;
  width: 1px;
  height: 0.75em;
  margin: 0 ${props => props.theme.constantValues.doubleEmptySpaceWidth};
  vertical-align: baseline;
  transform: rotate(30deg);
  background-color: ${props => props.theme.colors.gray.medium};
`

const GroupBadge = styled(Badge)`
  transform: scale(0.8);
`

export default class SelectableChannel extends Component {
  static propTypes = {
    channel: propType(selectableChannelFragment).isRequired,
    onSelection: PropTypes.func,
    highlighted: PropTypes.bool,
  }

  static defaultProps = {
    onSelection: () => {},
  }

  state = {
    isSelected: false,
  }

  toggleSelection = () => {
    const { onSelection, channel } = this.props

    this.setState(({ isSelected }) => {