DEV Community

Shriji
Shriji

Posted on

Svelte + Dad Jokes + GraphQL-yoga

#javascript #svelte #graphql #tutorial

Today we find ourselves celebrating International Yoga day and Father's day.

I am going to show you how to make a minimal dad joke app using a wonderful API http://dadjokes.online/ that directly gives a JSON response also no CORS issues if GraphQL is used.

So let's apply the knowledge from the previous article and combine it with a powerful framework. I chose Svelte because it has some amazing capabilities. Let's dive into the code.

End result looks like this

Prerequisites: 

  1/ REST endpoint (http://dadjokes.online/).
  2/ NodeJS. (graphql-yoga and good old node-fetch).
  3/ Svelte starter template (https://svelte.dev/)
  4/ svelte-apollo and apollo-boost
Enter fullscreen mode Exit fullscreen mode

Going to the URL we find a JSON response and we must convert into a schema for our GraphQL.

GraphQL Setup 

{
    "Joke": {
        "Opener": "Why did the computer have no money left?",
        "Punchline": "Someone cleaned out its cache!",
        "Processing Time": "0.000733"
    }
}
Enter fullscreen mode Exit fullscreen mode

Becomes like this although "ProcessingTime" isn't required I am still adding it.


type Joke {
    Opener: String
    Punchline: String
    ProcessingTime: String 
}
Enter fullscreen mode Exit fullscreen mode

And firing up GraphQL code should show up on your http://localhost:4000

Svelte code, Imports and Queries 

import ApolloClient, {gql} from "apollo-boost"
    import {query} from "svelte-apollo"

    const client = new ApolloClient({
        uri: "http://localhost:4000"
    })

    let result;
    let joke = gql `
                {
                getJoke{
                    Opener
                    Punchline
                    }
                }
                        `;
    result = query(client, {
        query: joke
    })
Enter fullscreen mode Exit fullscreen mode

This is 90% of the code and it should begin to work. Now let's make the app a little sassy. Svelte supports keyboard events from its svelte:window. Here is a piece of code that listens to the Enter key and it's key code is 13. Once it's pressed we refetch() and voila! we have another joke.

    let keyCode;

    function handleKeydown(event) {
        keyCode = event.keyCode;
        if (keyCode == 13) {
            result.refetch()
        }
    }
Enter fullscreen mode Exit fullscreen mode

The HTML part of the Svelte app

    {#await $result}
         <p>loading</p>
        {:then res}
        <p>{res.data.getJoke.Opener}</p>
        <p>..</p>
        <p>....</p>
        <p>{res.data.getJoke.Punchline}</p>
        <h1>Press Enter for a new joke!</h1>
     {/await}
Enter fullscreen mode Exit fullscreen mode

So here is our result.

Dad Joke + GraphQL + Svelte

This post explains JSON <> GraphQL in much better detail.

Happy Father's day and Yoga day!

Link to the repo https://github.com/peopledrivemecrazy/svelte-yoga-dadjoke

Enjoy.

Top comments (0)

Read next

dev007777 profile image

Python beats Javascript, Next.js Leap & the AI Coding Wars

TheDev -

chipm0nk profile image

From Concept to Code: Building a Simple Endless Runner Game

Chipm0nk -

gleamso profile image

The No-Fluff Guide to OpenGraph Images That Actually Work 🎯

gleamso -

bregwin profile image

Testing Troubles with Jest & ESM and how to fix it

Bregwin Jogi -