Tipe Loader

install our loader

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.

Inline

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

Configuration (recommended)

our tipe-loader config

{
  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

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

query Tipe {
  YourDoc: YourDocumentTemplate(id: "YOU_DOCUMENT_ID") {
    id
    name
  }
}

and import it in your js file

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.

webpack 1.x.x

// 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

// 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