Combining Hygraph with GitHub API data with James Quick

Content Federation provides a whole host of interesting combinations. I sat down with James Quick live on his stream to explore this concept with the GitHub API, Hygraph content, and SvelteKit.

During the stream, we set ourselves a few goals:

1. Create a fresh Hygraph project
2. Create a content model for site Pages
3. Create a GraphQL Remote Source for the GitHub API
4. Add a Collaborators field to each page to show all the collaborators for each page’s repository
5. Pull the data into SveltKit

#Watch the full video

#Setting up Hygraph and GitHub

To start, we needed to create a new Hygraph project. This will also work in any existing project. We created a blank project for James and set up a simple content model for his Pages with title (string), slug (slug), and body (rich text) fields.

From there, we followed the documentation to add a GraphQL remote source. To do this, we needed a “classic” GitHub API key and the GraphQL endpoint for GitHub. After running through all the security needs to get James an API key, we entered that data into a new Remote Source in the project’s Schema area.

After creating the remote source, that gave us access to the powerful GraphQL Remote Source field with all the GitHub data.

#Creating a Remote Source field

In order to use the remote source, we needed to create a remote source field to get the data we were looking for. To start and get a feel for things, we just got an entire repository’s set of data and then slowly narrowed that down to exactly the data we wanted: mentionableUsers from the repository.

After we navigated our way to the data we needed using the API playground, we simplified the query by moving most of it into the remote source field and only getting the nodes from the mentionable users array which took our overall query from 20 lines of code to 15 for the exact same data — developer ergonomics are helpful!

From there, we had the data we wanted to display on our site, and James took over to pull all this data into his SvelteKit application.

#Integrating with Hygraph with SvelteKit

For simplicity, James opted to only create one page from the model. This matched his current use case, but also made it simpler code to read for the audience.

He created a single-file component to create the page with a script that ran our query from the API playground and displayed it with a basic SvelteKit template all in one file.

#What’s next?

Now that we have all the GitHub information at our disposal, setting up additional information and creating dynamic repository pages with marketing information combining with API data is a breeze.

In January, Hygraph will host a live stream to take this concept deeper and make an entire website dedicated to showcasing information from a company’s various open source repositories.