guides

JavaScript

Last updated Invalid Date

Getting Started with Tipe using JavaScript

Getting your data from Tipe is as easy as a simple fetch request. In this code example we request a Folder using window.fetch and GraphQL. With GraphQL, you only need to know how to request the data, which means you don't need to use a GraphQL client.

undefined
var YOUR_FOLDER_ID = 'YOUR FOLDER ID'
var YOUR_ORG_SECRET_KEY = 'YOUR ORG ID'
var YOUR_API_KEY = 'YOUR API KEY'

var variables = { id: YOUR_FOLDER_ID }
var query = `
query API($id: ID!) {
  Folder(id: $id) {
    id
    name
  }
}
`

window.fetch('https://api.tipe.io/graphql', {
  method: 'post',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': YOUR_API_KEY,
    'Tipe-Id': YOUR_ORG_SECRET_KEY
  },
  body: JSON.stringify({ query: query, variables: variables })
})
  .then(function (res) { return res.json() })
  .then(function (data) {
    console.log(data)
  })

Each Document has an API tab where you can generate example code for REST or GraphQL. This means anywhere in your app you can quickly request the latest version of your Tipe document — during build time, runtime or both.

Configuration for javascript/webpack/tipe-loader

Tipe integrates seamlessly with Webpack using tipe-loader to fetch your data.

Installation

To install tipe-loader, run the following command if you're using npm:

bash
  npm install --dev webpack tipe-loader

Alternatively, use yarn:

bash
  yarn add --dev webpack tipe-loader

Setup

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

API Keys UI

Add them to your project as detailed in the Authentication guide.

Configuration

Setup your webpack.config.js file.

Replace YOUR_API_KEY_HERE and YOUR_ORG_KEY_HERE with the keys you found on the Tipe Dashboard.

js
const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'index.js',
    path: path.join(__dirname, './dist')
  },
  module: {
    rules: [
      {
        test: /\.tipe$/,
        enforce: 'pre',
        use: [
          {
            loader: 'tipe-loader',
            options: {
              apiKey: 'YOUR_API_KEY_HERE',
              orgKey: 'YOUR_ORG_KEY_HERE'
            }
          }
        ]
      }
    ]
  }
};

Package.json

In your package.json add a build command as follows:

json
{
  "scripts": {
    "build": "webpack"
  },
}

Tipe File

Create your .tipe file and edit your .tipe file with the following data:

  • replace YourDoc with an alias of your choosing
  • replace YOUR_DOCUMENT_ID with your Document ID
  • replace YourDocumentTemplate with the Name of your Document's Template

If you need help querying the right data, check the Example Code found after clicking [Run GraphQL].

graphQL
query Tipe {
  YourDoc: YourDocumentTemplate(id: "YOUR_DOCUMENT_ID") {
    title
    subtitle
    section1
    section2
    section3
    _meta {
      id
      name
      updatedAt
      createdAt
      published
    }
  }
}

Add Tipe to your JS file

Your data is ready synchronously at run time.

Add your .tipe file to your JS file as follows:

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

console.log('Your Doc data:', YourDoc);

const title = document.querySelector('.title');
title.innerHTML += YourDoc.title;

const subtitle = document.querySelector('.subtitle');
subtitle.innerHTML += YourDoc.subtitle;

Run your current build with npm:

bash
  npm run build

Alternatively, use yarn:

bash
  yarn build