Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/egoist/graphql-aot
Run GraphQL query ahead of time. (i.e. at build time)
https://github.com/egoist/graphql-aot
babel graphql loader webpack
Last synced: 3 months ago
JSON representation
Run GraphQL query ahead of time. (i.e. at build time)
- Host: GitHub
- URL: https://github.com/egoist/graphql-aot
- Owner: egoist
- License: mit
- Created: 2018-05-02T15:14:43.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-12-25T14:43:01.000Z (about 3 years ago)
- Last Synced: 2024-11-02T02:33:18.345Z (3 months ago)
- Topics: babel, graphql, loader, webpack
- Language: JavaScript
- Homepage:
- Size: 106 KB
- Stars: 54
- Watchers: 3
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# graphql-aot
[](https://npmjs.com/package/graphql-aot) [](https://npmjs.com/package/graphql-aot) [](https://circleci.com/gh/egoist/graphql-aot/tree/master) [](https://github.com/egoist/donate) [](https://chat.egoist.moe)
## Install
```bash
yarn add graphql-aot
```
## Usage
If you only want to work with the `import` statement, you will only need the webpack loader:
📝 __webpack.config.js__:
```js
module.exports = {
entry: './index.js',
module: {
rules: [
{
test: /\.gql$/,
loader: 'graphql-aot/loader',
options: {
defaultClientOptions: {
uri: 'https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn'
}
}
}
]
}
}
```
📝 __query.gql__:
```graphql
{
allPosts (first: 5) {
id
title
}
}
```
📝 __index.js__:
```js
import data from './query.gql'
console.log(data.allPosts)
```
If you want to use inline graphql tag, you will __also__ need the babel plugin:
📝 __.babelrc.js__:
```js
module.exports = {
plugins: [
require.resolve('graphql-aot/babel')
]
}
```
📝 __index.js__:
```js
const { allPosts } = graphql`
{
allPosts (first: 5) {
id
title
}
}
`
console.log(allPosts)
```
## API
### loaderOptions
#### defaultClientOptions
[Options for the default Apollo client](https://www.apollographql.com/docs/react/essentials/get-started.html#configuration).
#### client
Provide your own Apollo client instance.
#### getVariables
- __Type__: `function`
A function to get the variables you want to use with the [`client.query()`](https://www.apollographql.com/docs/react/api/apollo-client.html#ApolloClient.query) call.
The signature is: `loaderContext => any`
### babelOptions
#### tagName
- __Type__: `string`
- __Default__: `graphql`
#### importFrom
- __Type__: `string`
- __Default__: `undefined`
Ensure the tagged template literal identifier is imported from a module.
```js
import { gql } from 'a-module'
const data = gql`query { id }`
```
The above code will only work when you have following config for the babel plugin:
```js
{
importFrom: 'a-module',
tagName: 'gql'
}
```
#### removeImportStatement
- __Type__: `boolean`
- __Default__: `true` when you set `importFrom` to a module name
Remove relevant import statement if necessary.
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## Author
**graphql-aot** © [egoist](https://github.com/egoist), Released under the [MIT](./LICENSE) License.
Authored and maintained by egoist with help from contributors ([list](https://github.com/egoist/graphql-aot/contributors)).
> [github.com/egoist](https://github.com/egoist) · GitHub [@egoist](https://github.com/egoist) · Twitter [@_egoistlily](https://twitter.com/_egoistlily)