GraphQL based pages
Great way to play with data from GraphQL backend.
You can create fully functional static GraphQL data-driven websites using our JAMStack Tool. The websites are entirely based on your schema and customisable using CSS and JS consoles. You also have an option to preview, export and save your work in a few convenient ways.

Getting started

It's best to illustrate the functions of our tool with an example. You can fork the project using Fork button in the top right and play with the project yourself: https://app.graphqleditor.com/stack-of-the-future/pokemon
First, we need to prepare a valid GraphQL Schema (with at least one query) which will be the core of our model. When we have our schema ready, we deploy mock backend and open JAMStack Tool.
Deploy Mock Backend -> JAMStack
To start working on our mock frontend, we create a new view. You can create multiple views for a single GraphQL schema and freely switch between them. Each will contain its own CSS/JS code and components.
Create a view

Creating a static page preview

Now you can start writing the CSS/JS code that will describe how your frontend will look like. If you want to change the endpoint you are calling for this schema (for example real backend), just change this function a little bit. See the example of the entire code here.
1
export default async () => {
2
const Fetch = Chain("https://graphql-pokemon2.vercel.app/", {
3
"Content-Type": "application/json"
4
})
5
const response = await Fetch.query({
6
pokemons: [{ first: 151 }, {
7
number: true,
8
name: true,
9
image: true,
10
types: true,
11
resistant: true,
12
weaknesses: true
13
}]
14
})
15
const app = html`<${App} response=${response} />`
16
return r(app)
17
}
Copied!
This is driven by GraphQL Zeus:
GitHub - graphql-editor/graphql-zeus: GraphQL client and GraphQL code generator with GraphQL autocomplete library generation ⚡⚡⚡ for browser,nodejs and react native
GitHub
Zeus is a GraphQL client for Javascript and TypeScript. For more information read the GraphQL Zeus readme on github.
Here, we copied our pre-made CSS code with the following result:
The preview on the right is dynamically responding to changes in CSS code
After changing the JS code, update it by clicking the green play button or by Cmd/Crtl + S to see the results in the preview on the right.

Preview and download

Finally, we added a few ways to display and export the result of your work:
    by clicking the purple eye button, you can preview the mock frontend in a new tab
    you can Deploy a static site - this will generate a website viewable online - to access it click Open deployed static site
    Export zipped static site will download all of your mock frontend as JSON, CSS, and JS files in one zip folder
Last modified 4mo ago