react-native-graphql-transformer

Seamlessly use GraphQL files with react-native >= 0.45

Foreword

This package is inspired by the react-native-typescript-transform repository.

Goal

Use .gqlor .graphql files with React Native packager for better readability and separation of concerns.

Exemple of a .gql file with import statement:

#import "fragments/BasePost.gql"

query PostListItemQuery($id: ID) {
  Post(id: $id) {
    ...BasePost
  }
}

Usage

Step 1: Install

yarn add -D react-native-graphql-transformer

Step 2: Configure the react native packager

Add this to your rn-cli.config.js (make one if you don't have one already):

module.exports = {
  getTransformModulePath() {
    return require.resolve('react-native-graphql-transformer');
  },
  getSourceExts() {
    return ['gql', 'graphql'];
  }
};

If you need to run the packager directly from the command line, run the following

react-native start --transformer node_modules/react-native-graphql-transformer/index.js --sourceExts gql,graphql

Step 3: Write GraphQL code!

Contributors

Thomas Pucci 💻 📖 💡	TychoTa 💻

License

MIT