https://github.com/bamlab/react-native-graphql-transformer
Transform GraphQL source files
https://github.com/bamlab/react-native-graphql-transformer
Last synced: about 1 year ago
JSON representation
Transform GraphQL source files
- Host: GitHub
- URL: https://github.com/bamlab/react-native-graphql-transformer
- Owner: bamlab
- License: mit
- Created: 2017-12-09T18:14:46.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T10:22:37.000Z (over 3 years ago)
- Last Synced: 2025-06-02T14:55:32.343Z (about 1 year ago)
- Language: JavaScript
- Size: 172 KB
- Stars: 22
- Watchers: 5
- Forks: 8
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-graphql-transformer
[](#contributors)
Seamlessly use GraphQL files with react-native >= 0.45
## Foreword
This package is inspired by the
[react-native-typescript-transform](https://github.com/ds300/react-native-typescript-transformer)
repository.
## Goal
Use `.gql`or `.graphql` files with React Native packager for better readability
and separation of concerns.
**Exemple of a `.gql` file with import statement:**
```gql
#import "fragments/BasePost.gql"
query PostListItemQuery($id: ID) {
Post(id: $id) {
...BasePost
}
}
```
## Usage
### Step 1: Install
yarn add -D @bam.tech/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):
#### react-native 0.57 or later
```js
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'],
},
};
})();
```
#### react-native 0.56 or earlier
```js
module.exports = {
getTransformModulePath() {
return require.resolve('@bam.tech/react-native-graphql-transformer');
},
getSourceExts() {
return ['gql', 'graphql'];
}
};
```
### Step 3: Write GraphQL code!
## Contributors
| [
Thomas Pucci](https://github.com/tpucci)
[💻](https://github.com/bamlab/react-native-graphql-transformer/commits?author=tpucci "Code") [📖](https://github.com/bamlab/react-native-graphql-transformer/commits?author=tpucci "Documentation") [💡](#example-tpucci "Examples") | [
TychoTa](https://twitter.com/TychoTa)
[💻](https://github.com/bamlab/react-native-graphql-transformer/commits?author=tychota "Code") | [
Clément Taboulot](https://github.com/taboulot)
[💻](https://github.com/bamlab/react-native-graphql-transformer/commits?author=taboulot "Code") | [
arolson101](https://github.com/arolson101)
[💡](#example-arolson101 "Examples") | [
ajubin](https://github.com/ajubin)
[💻](https://github.com/bamlab/react-native-graphql-transformer/commits?author=ajubin "Code") | [
Gerard de Brieder](https://github.com/smeevil)
[🐛](https://github.com/bamlab/react-native-graphql-transformer/issues?q=author%3Asmeevil "Bug reports") | [
mike castleman](https://mlcastle.net/)
[📖](https://github.com/bamlab/react-native-graphql-transformer/commits?author=mlc "Documentation") |
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
## License
MIT