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):

const { getDefaultConfig } = require('metro-config');
 
module.exports = (async () => {
  const { resolver: { sourceExts } } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('@bam.tech/react-native-graphql-transformer'),
    },
    resolver: {
      sourceExts: [...sourceExts, 'gql', 'graphql'],
    },
  };
})();

Step 3: Write GraphQL code!

Contributors

Thomas Pucci 💻 📖 💡	TychoTa 💻	Clément Taboulot 💻	arolson101 💡	ajubin 💻	Gerard de Brieder 🐛	mike castleman 📖

License

MIT