Graphql CMS integration

[lexoyo]

Here is the code for this fearure: https://github.com/silexlabs/silex-cms

Work in progress to explore how to make it possible to create dynamic, data-driven websites with Silex

This integration allows Silex to connect to a headless CMS via a GraphQL API, similar to how Webflow operates. It lets you directly pull in and arrange your CMS data within Silex, linking design elements to specific data fields. With content-based styling and real-time previews

The open source ways to get a GraphQL API, with saas and a free plan:

• https://supabase.com/ (there are CORS issues)
• https://squidex.io/
• https://nhost.io/

What I hope to achieve is in the same spirit as this in webflow https://university.webflow.com/lesson/collection-list

Or more powerful is flutterflow https://www.youtube.com/watch?v=0sVZ_yNw5gY

But maybe simpler for me and more flexible for the user, with expressions like this maybe https://youtu.be/1MwSoB0gnM4?si=OVlyRa4w3KdIgPVy&t=106

All of this would probably be implemented as GrapesJs plugins

I would love feedback and ideas for code or UX

Links

• Graphiql in action
• Appsmith graphql support
• Buildbase and GQL
• https://docs.tooljet.com/docs/data-sources/graphql/

Data layer

Load data from the specified GraphQL endpoint, use introspection to display fields and load more data on demand. Give the components a way to define "variables" which will be made available as dynamic data

• [x] Use grapesjs editor object: editor.Api or editor.DataSource to get the available collections and relationships
• [x] Add component.getData() to GrapesJs components to get the variables defined at the level of the component
• [x] Add a component.setData(obj) to create variables which will be available in dynamic fields of the component and its children

Components traits / UI

The user need UI to be able to set dynamic data for the selected component(s)

• [x] Set HTML content, HTML attributes, CSS class names, tag name, title, ...
• [x] Conditional visibility
• [x] Loop / repeat: iterable (the data to loop over), offset, limit, sortField, reverse

In the style manager:

• [x] Each style property could (should?) accept dynamic data

In the page list:

• [x] a selector to select the current item when editing the page

In the site config or settings

• [x] Settings for "collection pages"
• [ ] Set the url of the graphql server

UX

Each input could have a "dynamic" state which opens an editor to build "dynamic", same as n8n do:

We could also let the user create GraphQL queries with this editor but I have no idea what for?

Excellent ux of flutterflow: https://www.youtube.com/watch?v=0sVZ_yNw5gY

The input for variables / states should be done like this

• Custom autocomplete: https://codemirror.net/examples/autocompletion/
• Single line: https://discuss.codemirror.net/t/codemirror-6-single-line-and-or-avoid-carriage-return/2979 or https://stackoverflow.com/questions/13026285/codemirror-for-just-one-line-textfield

Output

There will be 2 output from the user data:

• [ ] Preview the data on stage, see this and this - I am not sure how to do the loops
• [x] On publish, add template language (liquidjs, ejs...) to the website

[lexoyo]

@ceubri

[lexoyo]

news about this feature here: https://community.silex.me/d/26-work-in-progress-dynamic-websites/2

[lexoyo]

https://www.apirocket.io/ => Nice ui, free plan, not OS

Alos check https://developer.monday.com/api-reference/docs/introduction-to-graphologue and https://thegraph.com/docs/en/querying/graphql-api/ and https://developer.salesforce.com/docs/platform/graphql/overview

[lexoyo]

Ecommerce https://www.divante.com/blog/the-5-most-interesting-ecommerce-platforms-with-graphql-api