English | 简体中文

install

npm i -D babel-plugin-apollo-helper
// or
yarn add -D babel-plugin-apollo-helper

then .babelrc:

{
  plugins: [
    "babel-plugin-apollo-helper",
    {
      packages: Array<{specifier: string, source: string}>,
      include: Regex[],
      exclude: Regex[]
    }
  ]
}

config.packages default is :

packages: [
  { specifier: 'graphql', source: '@apollo/react-hoc' },
  { specifier: 'compose', source: 'lodash/flowRight' }
];

you can overide your custom graphql and compose

usage

input:

import { graphql } from '@apollo/react-hoc';

export default props => {
  return (
    <div>
      <span>1</span>
    </div>
  );
};

export const query = gql`
  query queryDemo {
    a {
      b
    }
  }
`;

output:

import { graphql } from '@apollo/react-hoc';
export default graphql(
  gql`
    query queryDemo {
      a {
        b
      }
    }
  `,
  {
    name: 'query'
  }
)(props => {
  return (
    <div>
      <span>1</span>
    </div>
  );
});

more usages can see feature

with babel-plugin-macros

install

.babelrc

{
  plugins: ['babel-plugin-macros']
}

usage

anything be wrapped by autoInjectGql will be injected graphql queries which is exported in current js.

import { graphql } from '@apollo/react-hoc';
import autoInjectGql from 'babel-plugin-apollo-helper/macro';

export default autoInjectGql(props => {
  return (
    <div>
      <span>1</span>
    </div>
  );
});

export const query = gql`
  query queryDemo {
    a {
      b
    }
  }
`;