Introduction

Great way to play with data from GraphQL backend.

You can create fully functional static GraphQL data driven websites. Let's discuss our twitter example available here: https://app.graphqleditor.com/explore-projects/twitter?visibleMenu=mock

JAMStack result screenshot

Driven by the code:

const response = await Gql.query({
Twits: {
sentence: true,
Author: {
username: true,
avatar: true
},
},
Me: {
avatar: true,
username: true
}
})

In this code you fetch the schema from default faker endpoint for twitter project.

If you want to change the endpoint you are calling for this schema( for example real backend ). Just change this function a little bit:

const backend = Chain("http://localhost:8080/graphql")
const response = await Chain.query({
Twits: {
sentence: true,
Author: {
username: true,
avatar: true
},
},
Me: {
avatar: true,
username: true
}
})

This is driven by the:

GraphQL client for Javascript and TypeScript. For more information read the graphql zeus readme on github.

const posts = response.Twits
const me = response.Me
const Post = ({
avatar,
username,
sentence
}) => `
<div class="
flex
bg-white
p-10
shadow-md
space-x-4
transform
hover:scale-105
transition-transform
duration-200
cursor-pointer
mx-5
">
<div class="order-1">
<img class="
rounded-full
" style="width:50px" src="${avatar}" />
</div>
<div class="order-2">
<div class="font-bold font-serif">
${username}
</div>
<p>${sentence}</p>
</div>
</div>
`
class AddPost extends HTMLElement {
constructor() {
super();
this.addEventListener('click', async () => {
const list = document.getElementById("PostList")
const sentence = document.getElementById("Tweet").value
list.innerHTML = `${Post({
avatar: me.avatar,
username: me.username,
sentence
})}${list.innerHTML}`
});
}
}
useCustomElement(AddPost);
useDynamic({
me,
Post
})
return `
<div class="bg-gray-100">
<div class="container
mx-auto
p-5
space-y-2
">
<div class="flex space-x-2">
<img class="
w-6
rounded-full
border-4
border-pink-300
" src="${me.avatar}">
<div>
Hello, <b class="
font-serif
">
${me.username}
</b>
</div>
</div>
<div class="
flex
w-full
space-x-2
" >
<input
class="
p-5
flex-1
"
type="text"
id="Tweet"
placeholder="Tweet something"
/>
<add-post class="
bg-pink-500
hover:bg-pink-400
text-white
font-bold
py-2
px-4
border-b-4
border-pink-700
hover:border-pink-500
rounded
flex
items-center
cursor-pointer
transition-bg
duration-200
"
>
Sweet 🐤
</add-post>
</div>
</div>
<div
id="PostList"
class="container
mx-auto
space-y-5
">
${posts.map(p => Post({
username: p.Author.username,
avatar: p.Author.avatar,
sentence: p.sentence
})).join("")}
</div>
</div>
`

Rest of the code is responsible for rendering with html and WebComponent