Get started with JavaScript SDK

Installation

To install the package:

npm install @cognite/sdk --save

Usage

const { CogniteClient } = require('@cognite/sdk');

Using ES modules

import { CogniteClient } from '@cognite/sdk';

Using TypeScript

The language of the SDK is native TypeScript, and you don’t have to define any extra types.

Quickstart

Web

import { CogniteClient } from '@cognite/sdk';

async function quickstart() {
  const client = new CogniteClient({ appId: 'YOUR APPLICATION NAME' });
  client.loginWithOAuth({
    project: 'publicdata',
  });

  const assets = await client.assets.list().autoPagingToArray({ limit: 100 });
}
quickstart();

For more details, see the authentication guide.

Backend

import { ConfidentialClientApplication } from "@azure/msal-node";
import { CogniteClient } from "@cognite/sdk";

async function quickstart() {
  const pca = new ConfidentialClientApplication({
    auth: {
        clientId: 'YOUR CLIENT ID',
        clientSecret: 'YOUR CLIENT SECRET',
        authority: 'INSERT AUTHORITY HERE'
    }
  });

  async function getToken() {
    var response = await pca.acquireTokenByClientCredential({
        scopes: ['INSERT SCOPE HERE'],
        skipCache: true,
      });
      return response.accessToken;
  }

  const client = new CogniteClient({
    appId: 'Cognite SDK samples',
    baseUrl: 'YOUR BASE URL',
    project: 'YOUR CDF PROJECT NAME',
    getToken: getToken
  });

  const assets = await client.assets.list();
  console.log(assets);
}

quickstart();

Hello, world! - React App

This guide shows you how to create a simple app using the Cognite JavaScript SDK. The app authenticates with, and fetches data from, Cognite Data Fusion (CDF). The simplest way to retrieve data from CDF is to use an SDK. In this guide, we use data from the Open Industrial Data project.

To use this guide you need to have npm installed on your machine.

Install create-react-app

Install the create-react-app tool to set up your React application.

npx create-react-app hello-world
cd hello-world

Install the Cognite JavaScript SDK

Install the SDK package in your project.

npm install @cognite/sdk --save

Now that everything is ready, proceed with coding. To authenticate the SDK and get access to data, you can either use the OAuth login flow or use API keys. In this example, we will use the OAuth login flow to avoid storing sensitive API keys in the source code. You can find a comprehensive guide to Cognite JS SDK authentication here. There are two ways to sign in the user:

Redirect to the sign-in page
Use a sign-in popup window

Authentication with redirect

Set up authentication in App.js

Replace the code in ./src/App.js to configure OAuth authentication with redirect.

import React, { Component } from 'react';
import { CogniteClient } from '@cognite/sdk';

const project = 'publicdata';

class App extends Component {
  async componentDidMount() {
    const client = new CogniteClient({ appId: 'Cognite SDK tutorial' });
    client.loginWithOAuth({ project });
    client.authenticate();
  }

  render() {
    return <div className="App"></div>;
  }
}

export default App;

To test the authentication, it’s important to enable SSL or HTTPS. Cognite only lets trusted web pages authenticate.

Run the app with HTTPS

In a terminal window, start your application with HTTPS enabled.

HTTPS=true npm run start

Open your browser and verify that you can sign in to the publicdata project.

Fetch data from CDF

Update ./src/App.js to fetch 10 assets from CDF. The client.authenticate() call is removed because the SDK calls it automatically on API requests.

import React, { Component } from 'react';
import { CogniteClient } from '@cognite/sdk';

const project = 'publicdata';

class App extends Component {
  state = {
    assets: null,
  };

  async componentDidMount() {
    const client = new CogniteClient({ appId: 'Cognite SDK tutorial' });
    client.loginWithOAuth({ project });
    const assets = await client.assets.list().autoPagingToArray({ limit: 10 });

    this.setState({ assets });
  }

  render() {
    return <div className="App"></div>;
  }
}

export default App;

Display the assets

Update the render method in ./src/App.js to display the asset names.

import React, { Component } from 'react';
import { CogniteClient } from '@cognite/sdk';

const project = 'publicdata';

class App extends Component {
  state = { assets: null };

  async componentDidMount() {
    const client = new CogniteClient({ appId: 'Cognite SDK tutorial' });
    client.loginWithOAuth({ project });
    const assets = await client.assets.list().autoPagingToArray({ limit: 10 });

    this.setState({ assets });
  }

  render() {
    const { assets } = this.state;
    return (
      <div className="App">
        {assets && assets.map((asset) => <p key={asset.id}>{asset.name}</p>)}
      </div>
    );
  }
}

export default App;

You have now successfully fetched and displayed data using the SDK.

You can authenticate the SDK by providing a pop-up window. The benefit is that you don’t lose the state of the application. The example below changes the code to use a pop-up window. Also, there’s some refactoring to make the code more readable; there’s a button to call the pop-up window on user interaction and avoid having it blocked by the browser. In ./src/App.js:

import React, { Component } from 'react';
import {
  CogniteClient,
  POPUP,
  loginPopupHandler,
  isLoginPopupWindow,
} from '@cognite/sdk';

const project = 'publicdata';

class App extends Component {
  state = {
    assets: null,
    client: null,
  };

  async componentDidMount() {
    if (isLoginPopupWindow()) {
      loginPopupHandler();
      return;
    }

    const client = new CogniteClient({ appId: 'Cognite SDK tutorial' });
    client.loginWithOAuth({
      project,
      onAuthenticate: POPUP,
    });
    this.setState({ client });
  }

  fetchAssets = async () => {
    const { client } = this.state;
    const assets = await client.assets.list().autoPagingToArray({ limit: 10 });

    this.setState({ assets });
  };

  renderAssets = () => {
    return (
      <>
        {this.state.assets.map((asset) => (
          <p key={asset.id}>{asset.name}</p>
        ))}
      </>
    );
  };

  render() {
    const { assets } = this.state;
    return (
      <div className="App">
        {assets ? (
          this.renderAssets()
        ) : (
          <button onClick={this.fetchAssets}>
            <h1>Click here to fetch assets from Cognite</h1>
          </button>
        )}
      </div>
    );
  }
}

export default App;

Develop

SDKs and toolkits

Get started with JavaScript SDK

Installation

Usage

Using ES modules

Using TypeScript

Quickstart

Web

Backend

Hello, world! - React App

Authentication with redirect

​Installation

​Usage

​Using ES modules

​Using TypeScript

​Quickstart

​Web

​Backend

​Hello, world! - React App

​Authentication with redirect

​Authentication with popup

Installation

Usage

Using ES modules

Using TypeScript

Quickstart

Web

Backend

Hello, world! - React App

Authentication with redirect

Authentication with popup