Connect with Apollo Client to use GraphQL with TerminusDB

Prerequisites

TerminusDB running locally — see Docker setup for instructions
Node.js and npm installed
An existing database with a schema

What you'll achieve By the end of this guide, you will have connected Apollo Client to TerminusDB's GraphQL endpoint.

TerminusCMS is now DFRNT Hub TerminusCMS has been renamed to DFRNT Hub. All features described on this page are available at dfrnt.com. The TerminusDB open source database remains unchanged.

Install dependencies

Example: Bash

npm install @apollo/client graphql

Initialize ApolloClient and Connect with TerminusDB

Import the required dependencies needed -

Example: JavaScript

import { ApolloClient, InMemoryCache, ApolloProvider, gql, HttpLink, ApolloLink, concat } from '@apollo/client';

Example: JavaScript

const Apollo =  require( '@apollo/client');

const { ApolloClient, InMemoryCache, concat, gql,HttpLink,ApolloLink } = Apollo

Initialize ApolloClient by passing its constructor with a configuration object with the TerminusDB server endpoint, user credentials and cache fields.

Extra information about the Apollo client cache can be found on their website

Connect with TerminusDB Local

Example: JavaScript

const orgName = "myOrganizationName"
const dbName = "myDBname"
const myBranch = "main"

const user = "admin"
const password = "mypass"
const userPassEnc = btoa(`${user}:${password}`)

const terminusdbURL = `http://localhost:6363/api/graphql/${orgName}/${dbName}/local/branch/${myBranch}/`

const httpLink = new HttpLink({ uri: terminusdbURL });
const authMiddleware = new ApolloLink((operation, forward) => {
    // add the authorization to the headers
    operation.setContext(({ headers = {} }) => ({
    headers: {
        ...headers,
        authorization: `Basic ${userPassEnc}`}
    }));
    return forward(operation);
})

const cache = new InMemoryCache({
    addTypename: false
});

const value = concat(authMiddleware, httpLink)

const apolloClient = new ApolloClient({
    cache:cache,
    link: value,       
});

// Query your database

apolloClient
  .query({
    query: gql`
     query{
        Person{
        _id
        name
        }
    }
    `,
  })
  .then((result) => console.log(result.data))
  .catch(err =>console.log(err.message));

Connect with DFRNT TerminusDB cloud

You will need to get your API key to connect with DFRNT TerminusDB cloud

Example: JavaScript

const orgName = "myOrganizationName"
const dbName = "myDBname"
const myBranch = "main"

const myAPIToken = 'replaceYourToken'

const terminusdbURL = `https://dfrnt.com/api/hosted/${orgName}/api/graphql/${orgName}/${dbName}/local/branch/${myBranch}/`

const httpLink = new HttpLink({ uri: terminusdbURL });
const authMiddleware = new ApolloLink((operation, forward) => {
    // add the authorization to the headers
    operation.setContext(({ headers = {} }) => ({
    headers: {
        ...headers,
        authorization: `Token ${myAPIToken}`}
    }));
    return forward(operation);
})

const cache = new InMemoryCache({
    addTypename: false
});

const value = concat(authMiddleware, httpLink)

const apolloClient = new ApolloClient({
    cache:cache,
    link: value,       
});

// Query your database

apolloClient
  .query({
    query: gql`
     query{
        Person{
        _id
        name
        }
    }
    `,
  })
  .then((result) => console.log(result.data))
  .catch(err =>console.log(err.message));

Connect with TerminusDB Local

Connect with DFRNT TerminusDB cloud

Was this helpful?