Tipe Loader

install our loader
``bash
npm install tipe-loader
`
Add our tipe-loader to your Webpack config module.rules and replace YOUR_ORG_SECRET_KEY and YOUR_API_KEY with your keys on Tipe.

Usage

$3

`js
const { YourDoc } = require('tipe-loader!./YourDoc.tipe');
`




$3


our tipe-loader config
`js
{
test: /\.tipe$/,
enforce: 'pre',
use: [
{
loader: 'tipe-loader',
options: {
apiKey: YOUR_API_KEY,
orgKey: YOUR_ORG_SECRET_KEY
}
}
]
}
`
Should be placed in module.rules
webpack.config.js
`js
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.tipe$/,
enforce: 'pre',
use: [
{
loader: 'tipe-loader',
options: {
apiKey: YOUR_API_KEY,
orgKey: YOUR_ORG_SECRET_KEY
}
}
]
}
// ...
] // rules
} // module
} // webpack config
`


Now create a .tipe file with the GraphQL query from our Dashboard.

You can find these values in the API tag when viewing a Document and press [Run GraphQL]
* replace YOU_DOCUMENT_ID with the id of your document
* replace YourDoc with any alias you like
* replace YourDocumentTemplate with the Name of your Document's Template

YourDoc.tipe
`graphql
query Tipe {
YourDoc: YourDocumentTemplate(id: "YOU_DOCUMENT_ID") {
id
name
}
}
`
and import it in your js file
`js
import { YourDoc } from './YourDoc.tipe'
// your data is available synchronously during runtime
console.log('Your Document Data', YourDoc)
`

At this point you can treat our .tipe files as GraphQL files so you're essentially writing GraphQL. You can also include multiple queries in the same file or import any different files it's up to you 👍 We hide all of the complexity for you so you can just work with your data.

Loader Options

exportAs can be set to either value. Default set to "commonjs"
* "commonjs" = module.exports =
* "esm" = export default

url the tipe GraphQL endpoint. Default set to "https://api.tipe.io/graphql"

headers the heads of your Tipe GraphQL endpoint.




Maintainer










PatrickJS

David Arellano




webpack 1.x.x


`js
// webpack 1
{
test: /\.tipe$/,
loader: 'tipe-loader',
options: {
apiKey: YOUR_API_KEY,
orgKey: YOUR_ORG_SECRET_KEY
}
}
`
Should be placed in module.preLoaders
webpack.config.js
`js
// webpack 1
module.exports = {
// ...
module: {
preLoaders: [
// ...
{
test: /\.tipe$/,
loader: 'tipe-loader',
query: {
apiKey: YOUR_API_KEY,
orgKey: YOUR_ORG_SECRET_KEY
}
}
// ...
], // preloaders
loaders: [
// ... loaders
] // loaders
} // module
} // webpack config
``
---