graphql-guide.adoc

GraphQL quick setup guide

Table of Contents

• Pre-requisites
• Install dependencies
• Initializing Apollo client
  • Using cookies
  • Cookieless authentication
• Using the client
• Reset store on logout
• Next steps

This section serves as a quick guide for initiating an interaction with ThoughtSpot’s GraphQL endpoint. We will be using the Apollo client to interact with ThoughtSpot’s GraphQL endpoint.

Pre-requisites

Before you begin, make sure you have a JavaScript environment set up for your application. This requires Node.js, which you can download and install from https://nodejs.org/en/download/.

After Node.js is successfully installed, you can initiate a new project using the npm init command.

Install dependencies

• @apollo/client

• graphql

With npm

npm install @apollo/client graphql

With yarn

yarn add @apollo/client graphql

Initializing Apollo client

Import the following from the Apollo client library:

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

Initialize the client using one of the methods described in the following sections.

Using cookies

For this method, we will utilize the cookies set by the browser for authentication.

const client = new ApolloClient({
  uri: BASE_URL + "/api/graphql/2.0",
  cache: new InMemoryCache(),
  credentials: "include",
});

With the client defined above, add a link to ThoughtSpot’s GraphQL endpoint and run queries.

Because we’re relying on cookies for authentication, it’s important to have the cookies set up correctly before we run the queries.

To make sure the cookies are in place, call the login api before running other queries.

client
  .mutate({
    mutation: gql`
      mutation Login {
        login(username: "<YOUR_USERNAME>", password: "<YOUR_PASSWORD>")
      }
    `,
  })
  .then((result) => console.log(result))
  .catch((err) => console.log(err));

Note	You can also use your cluster’s secret key here for authentication.

Cookieless authentication

For this method, you need to request for a full access token and use it for authentication. Let us first create a function to get a fill access token:

const getToken = async () => {
  const fullAccessRes = await fetch(
    BASE_URL + "/api/rest/2.0/auth/token/full",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ username: "tsadmin", password: "admin" }),
    }
  );
  const fullAccessData = await fullAccessRes.json();
  return fullAccessData.token;
};

Using this function, we can set up our client as shown in the following examples. Along with the imported functions described in the preceding example, you need setContext from the Apollo client library.

import { setContext } from "@apollo/client/link/context";

const authLink = setContext(async (_, { headers }) => {
  // get the authentication token
  const token = await getToken();
  // return the headers to the context so httpLink can read them
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    },
  };
});

// httpLink is the link to the graphql endpoint
const httpLink = createHttpLink({
  uri: BASE_URL + "/api/graphql/2.0"
});

Now you can initialize the client as shown in this example:

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});

Using the client

After the client is set up, run a query.

client
  .query({
    query: gql`
      query GetCurrentUserInfo {
        getCurrentUserInfo {
          id
          name
        }
      }
    `,
  })
  .then((result) => console.log(result))
  .catch((err) => console.log(err));

Reset store on logout

Apollo caches requests, so it’s recommended to reset the store on logout.

client.resetStore()

To learn more about reset store, go to https://www.apollographql.com/docs/react/networking/authentication/#reset-store-on-logout.

Next steps

After you have set up a basic client to interact with ThoughtSpot’s GraphQL endpoint, you can integrate it with a React application. For more information, see https://www.apollographql.com/docs/react.