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 suite of APIs enables you to build custom UI applications that leverage the same APIs that underpin the AppDirect Marketplace. For instance, you can manage users, companies, and subscriptions using these APIs. Extensions can access these APIs without requiring OAuth clients, as they are rendered within the context of a logged-in user on the marketplace.

Refer to the following for a complete list of marketplace APIs and their corresponding documentation:

• API User Guides
• GraphQL API reference
• REST API reference

Using Marketplace GraphQL API

We recommend using the GraphQL API when possible, as it provides several advantages for our customers. GraphQL is a query language and runtime for APIs that enables efficient data retrieval and management. It delivers a thorough representation of the marketplace API data, allows clients to request only the data they need, and facilitates easier API adaptation over time.

Using GraphQL APIs with React Query

The extension blank boilerplate includes a hook that leverages the marketplace GraphQL API, which can be a great starting point for your extension. The hook is built using React Query, a data fetching library for React. React Query is a great choice for fetching data from APIs.

The example below demonstrates a basic use case for fetching data from an API with React Query. For more detailed information and guidance on fetching, posting, and testing using React Query, refer to the official documentation or check out 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("https://help.appdirect.com/api/graphql", 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 Using our Rest APIs

Some of our REST APIs require a CSRF token to be passed in the header (X-XSRF-TOKEN). You can retrieve the CSRF token from the marketplace using 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;
}