explore.opensauced.pizza VS Strapi

Following up on my post last week about the first aspect of a PR contribution to explore.opensauced.pizza, I'm going to talk about the second aspect of that PR - joyfully implemented as an HTML element (I really like these). So as I mentioned in the post before: We also wanted to let users quickly reproduce the queries we use in Open Sauced... this way, when its time to iterate on an existing feature, there's very little friction to finding that starting point. About a week before this, I had been working on a PR for tabulating the GraphQL API calls in the Open Sauced docs, so a lot of the details about API calls were pretty fresh. Side note, if you want line breaks inside a table in markdown, you'll need to use a element, but don't forget to use a self closing tag in the event your markdown file is parsed and used by a tool like Docusaurus, :cough, cough:. Shout out to @0vortex for cleaning up my messes! Anywho, after looking around at GraphiQL implementations, I came to the belief that most define a fetcher with the correct API endpoint/headers and otherwise things just work out of the box. Once the introspection query is run and the schema parsed and validated, the combination of the Explorer pane and the Query Editor pane make it really easy to build up and run valid queries. There's also a common pattern of using a default query so when the client first loads up, the query is pre-populated. What these two don't help with is reproducing and working with multiple queries. The approach I wound up taking was to store all of the dynamic queries in an object, and then generate a element in the toolbar, which updates the query contents and query name with the onchange event. Here's the piece of code that does the job...

Flow state is a rare treat for me these days. The last time I can remember being in that zone was working on a GraphiQL implementation for Open Sauced, https://explore.opensauced.pizza. The Open Sauced project makes use of OneGraph, to handle authentication and persisted query features in working with the GitHub GraphQL API. This was the first I had worked on any kind of GraphiQL implementation, so for those of you at the point I was at then, GraphiQL is an Open Source project that can be used to interact with a GraphQL API in an ad-hoc and dynamic way, allowing a developer to iterate quickly on features from a data retrieval standpoint. This post is about the PR #2 in the repo.

Strapi provides a centralized data managing platform. This makes it easier to organize, update, and maintain the FAQ data. It also automatically generates a RESTful API for accessing the content stored in its database.

https://prisma.io is popular as I understand it. I've been trying out https://strapi.io the last week and am thoroughly impressed.

They both do much more than build queries. One big thing both do is automate database migration calculations. Strapi goes further and gives you a CMS and admin UI on top, as well as doing a lot more of the complex query building from a json object. Both still require a fundamental understanding of the data model and SQL

As of April 2024, Strapi's GitHub repository has garnered 59.7k stars and 7.5k forks, showcasing its widespread adoption. The project has also secured a substantial $45+ million in funding, cementing its position as a prominent player in the headless CMS space.

const pages = await client.GET("/pages", { params: { query: { filters: { // @ts-ignore - openapi generated from strapi results in Record // https://github.com/strapi/strapi/issues/19644 path: { $eq: path, }, }, // @ts-ignore populate: { blocks: { populate: "*" }, }, }, }, });

On a side note. Where do all these endpoints come from? Strapi is open source. We can read the source code. All these endpoint come from the Users and permissions plugin. So, if we go to Strapi on github and browse around the files a bit eventually you will find the auth.js file that contains all of the routes. You can also find the Strapi controllers in there if you're interested.

Strapi

Strapi: The Code Anarchist

Strapi - Open source Node.js Headless CMS 🚀