guides

Frameworks

Last updated Invalid Date

You can use Tipe for getting your content into your app with any Framework. We can do this using our tipe-loader and webpack. If you're using a CLI like create-react-app or @angular/cli you must eject the scripts and edit your webpack config.

Tipe Loader

A webpack loader that removes the complexity of fetching your data with our API. Just write GraphQL.

Installation

bash
npm install tipe-loader
yarn add tipe-loader

Setup

Find your API Key and Org Secret key on Tipe Dashboard under API Keys.

API Keys UI

Webpack Config

Add our webpack loader to config.

If you're using create-react-app make sure to include the loader after the babel loader

js
// webpack 2+
module.exports = {
  // ... Entry/Output
  },
  module: {
    rules: [
          // before your .ts or .js preprocessing
      {
        test: /\.tipe$/,
        enforce: 'pre',
        use: [
          {
            loader: 'tipe-loader',
            options: {
              apiKey: 'YOUR_API_KEY',
              orgKey: 'YOUR_ORG_KEY'
            }
          }
        ]
      }
    ]
  }
  // ... your configuration
};

For Webpack 1

Add the loader to preloaders

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

Tipe File

The .tipe file is where you right your query to our GraphQL API. Now create a .tipe file like the GraphQL query example below:

You can find the Document ID in the API tab when viewing your Document and press [Run GraphQL]

  • replace YourDoc with any alias you like
  • replace YOUR_DOCUMENT_ID with the id of your document
  • replace YourDocumentTemplate with the Name of your Document's Template
graphql
query Tipe {
  YourDoc: YourDocumentTemplate(id: "YOUR_DOCUMENT_ID") {
    test
    _meta {
      id
      name
      updatedAt
      createdAt
      published
    }
  }
}

Add your .tipe file to your JS file.

js
  import { YourDoc } from './YourDoc.tipe';

Your data is ready syncronously at run time try it!

js
  console.log('Your Data: ', example);

You can run multiple querys in a single tipe file if needed:

graphql
query Tipe {
  Example: Test1(id: "TEST1_DOCUMENT_ID") {
    test
    _meta {
      id
      name
      updatedAt
      createdAt
      published
    }
  }
  Example2: Test2(id: "TEST2_DOCUMENT_ID") {
    test
    _meta {
      id
      name
      updatedAt
      createdAt
      published
    }
  }
}