Important

This feature is currently in Early Availability (EA) status. For more information, see our product lifecycle phases.

Using the Marketplace APIs

Overview

AppDirect's APIs let you build custom UI applications that use the same APIs as the AppDirect Marketplace. You can manage users, companies, and subscriptions from your extension. Extensions can call these APIs without OAuth clients because they run in the context of a logged-in user on the marketplace.

For a full list of marketplace APIs and documentation, see:

• API User Guides
• Graphql API reference
• REST API reference

Using Marketplace GraphQL API

We recommend using the GraphQL API when possible. GraphQL is a query language and runtime for APIs that supports efficient data retrieval and management. It exposes marketplace API data in a structured way, lets clients request only the data they need, and makes it easier to adapt to API changes over time.

Using GraphQL APIs with React Query

The extension boilerplate includes a hook that uses the marketplace GraphQL API. The hook is built with React Query, a data-fetching library for React.

The example below shows a basic use of React Query to fetch data. For more on fetching, posting, and testing with React Query, see the official documentation or Practical React Query.

// hook
const GET_ACCOUNT = gql`
  query {
    me {
      id
      firstName
      lastName
      email
      currentMembership {
        roles
        account {
          name
          id
        }
      }
    }
  }
`;

const fetch = async (): Promise<any> => {
  return request("/graphql-docs/docs", GET_ACCOUNT);
};

const useMarkeplaceAccount = (): UseQueryResult<unknown> =>
  useQuery([`account_me`], () => fetch(), { cacheTime: 0 });

export default useMarkeplaceAccount;

// in a component
const { data, isSuccess, isError, isLoading } = useMarkeplaceAccount();
console.log(data, isSuccess, isError, isLoading);

Posting data with the REST APIs

Some REST APIs require a CSRF token in the X-XSRF-TOKEN header. You can read the CSRF token from the marketplace with the following code:

const cookie = document.cookie || '';

const getCookieValue = name => {
   const result = cookie.match(`(^|;)\\s*${name}\\s*=\\s*([^;]+)`);
   return result ? result.pop() : '';
};

const xsrfToken = getCookieValue('XSRF-TOKEN');

// then in the request
if (xsrfToken) {
    headers['X-XSRF-TOKEN'] = xsrfToken;
}