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.
npm install tipe-loaderinstall our loader
``bash`
npm install tipe-loadermodule.rules
Add our tipe-loader to your Webpack config and replace YOUR_ORG_SECRET_KEY and YOUR_API_KEY with your keys on Tipe.
`js`
const { YourDoc } = require('tipe-loader!./YourDoc.tipe');
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 TemplateYourDoc.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
``