Why GraphQL Is the Secret Weapon for Building Hubspot Membership Portals

With the recent launch of Content Hub, Hubspot professional subscribers now have access to one of the most powerful features in the platform, Hubspot Memberships. Prior to these changes, Hubspot membership tools were exclusive to enterprise users. These membership tools allow developers to build gated portals for their clients. These environments allow for information to be quickly queried from the Hubspot CRM and brought onto a Hubspot CMS page for a logged in user. Today, I would like to look at the secret weapon to building Hubspot membership portals: graphQL. 

Before we get into the nitty-gritty, we’ll first define GraphQL. In short, it is a query language for APIs. When examined within the Hubspot context, the tools allow you to build complex queries of nested data relationships. Once you have these queries built you can then attach them to Hubspot modules or templates. 

For example, with the regular HubSpot API endpoints, you can run a search (using the Search API) to check for contacts with the first name "Steve." However, with GraphQL, you can search for contacts with the first name "Steve" and also retrieve their associated records data, such as the calls or emails made to any contact with the first name “Steve”, all in a single API request!

Examining the Forest Before Examining the Trees

Now we will look at the general structure of a GraphQL query. Most if not all queries that you write for membership portals will start with the Hubspot contact record, the reason for this is because when you have a “logged in user” you will most likely be showcasing that users data (or associated data), and allowing them to interact with that data in a particular way. This might be allowing them to view, append, or overwrite the data that you have stored in the Hubspot CRM. 

Once you have the contact record information you will most likely be pulling a series of associated data, or associated objects. This could be information from native Hubspot objects like companies, and deals. Or it could be information from associated custom objects that you have setup in Hubspot.

Anatomy of a GraphQL query

The GraphQL tool is nested within the CRM Developer tools inside your Hubspot portal, however you can also get there by going to https://app.hubspot.com/l/graphiql.

Building Your First Query 

Before you start building your first query you will need to select your data type that you want. So you need to choose whether you want to pull data from HubDB, Blog, or the CRM. Once you select the data type you can then start building your query. 

As a practical demonstration, let’s explore a real-world GraphQL query used in a HubSpot membership portal to fetch a contact's associated deals. It offers a glimpse into the efficiency and depth of information GraphQL is capable of retrieving in a single request.

The Query: Fetching Contact’s Associated Deals

Below is a GraphQL query designed to fetch a specific contact's information along with details about deals associated with that contact:

Dissecting the Query

1. Specifying the Operation: query GetDeals names our operation. It's good practice to name your queries for better readability and maintainability.
   
   
2. Navigating the CRM: CRM { contact(...) { ... } } establishes the root of our query within HubSpot's CRM data, indicating we’re starting with contact data. If you were looking to pull data from a blog or from a HubDB you would swap out CRM for one of those in this case.
   
   
3. Identifying the Contact: The uniqueIdentifier and `uniqueIdentifierValue` pair specifies the exact contact we're interested in, based on their unique ID. You can use email or any other ID property for this, you could also do a contact collection if you wanted to do a search across contact properties from a particular contact or contacts.
   
   
4. Fetching Contact Information: firstname, lastname, and email directly fetch these properties of the contact, laying the ground for personalized communication.
   
   
5. Accessing Associated Deals: The nested associations { deal_collection__contact_to_deal(...) { ... } part traverses the data relationship, accessing deals associated with the contact. 
   
   
6. Sorting and Selecting Deal Data orderBy: createdate__desc sorts the deals by their creation date in descending order, ensuring we're presented with the most recent deals first. This section inside the () is also where you might want to provide filters with the filters key. Inside, we select specific details of each deal to present: createdate, dealstage, dealname, and amount.

Applying the Query

For a membership portal, this query could be used to present a tailored dashboard to users, showcasing the latest activity or progress regarding their deals. For developers, this is a prime demonstration of GraphQL's ability to craft user-specific experiences in a highly efficient manner.

Performance and Personalization

One of GraphQL's biggest draws is how it enables highly personalized user experiences without sacrificing performance. Through efficient data retrieval, membership portals can display rich, user-specific data dashboards, facilitate interactions based directly on CRM data, and do so with minimal loading times.

Recent Use Case 

We recently built out a training portal for our client Core Imaging, where we surfaced proprietary training data into the portal, and allowed for “self-paced” progress. The Hubspot CRM would update based on the user's path through the curriculum until the users completed the program and achieved their certification. 

This would have been extremely difficult to achieve, had it not been for the tight integration between the Hubspot CRM tools and the Hubspot CMS tools with GraphQL as the bridge between the two. 

In conclusion 

In conclusion, Hubspot memberships are a powerful suite of tools that allow developers to build crafted portals for their clients by bringing in proprietary data from the Hubspot CRM onto a gated CMS membership page. Reach out to use if you are thinking of build your membership portal on the Hubspot platform, we would love to learn about your next project.