Working with Houdini and Hygraph

# create new svelte project named hygraph-with-houdini
pnpm init svelte@next hygraph-with-houdini
# change directory into the newly created project
cd hygraph-with-houdini
# install dependencies
pnpm install
# optional init git repo
git init && git add -A && git commit -m "Initial commit" (optional)

Which Svelte app template? › Skeleton project
Use TypeScript? › No
Add ESLint for code linting? › No
Add Prettier for code formatting? › Yes

pnpm i -D houdini houdini-preprocess

npx houdini init

import adapter from '@sveltejs/adapter-auto'
import houdini from 'houdini-preprocess'
import path from 'path'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: [houdini()],
  kit: {
    adapter: adapter(),

    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',
    vite: {
      resolve: {
        alias: {
          $houdini: path.resolve('.', '$houdini'),
        },
      },
      server: {
        fs: {
          // Allow serving files from one level up to the project root
          // https://vitejs.dev/config/#server-fs-allow
          allow: ['..'],
        },
      },
    },
  },
}

export default config

touch src/routes/__layout.svelte

<script context="module">
  import { setEnvironment } from '$houdini'
  import environment from '../environment'

  setEnvironment(environment)
</script>

<slot />

npx svelte-add@latest tailwindcss

<script>
  import { graphql, query } from '$houdini'
  const { data } = query(graphql`
    query AllPosts {
      posts {
        title
        slug
        date
        excerpt
        tags
        coverImage {
          url(transformation: { image: { resize: { width: 400, height: 400, fit: clip } } })
        }
      }
    }
  `)
  const { posts } = $data
</script>

<pre>{JSON.stringify(posts, null, 2)}</pre>

npx houdini generate

npx houdini generate
AllPosts
Error: Could not convert scalar type: Date

/** @type {import('houdini').ConfigFile} */

const config = {
  schemaPath: './schema.graphql',
  sourceGlob: 'src/**/*.svelte',
  module: 'esm',
  framework: 'kit',
  scalars: {
    // the name of the scalar we are configuring
    Date: {
      // the corresponding typescript type (what the typedef generator leaves behind in the response and operation inputs)
      type: 'Date',
      // turn the api's response into that type
      unmarshal(val) {
        const date = new Date(val).toISOString()
        return date
      },
      // turn the value into something the API can use
      marshal(date) {
        return date.getTime()
      },
    },
  },
}

export default config

npx houdini generate
AllPosts

"scripts": {
  "dev": "npx houdini generate && svelte-kit dev",
  "build": "npx houdini generate && svelte-kit build",
  "package": "svelte-kit package",
  "preview": "npx houdini generate && svelte-kit preview",
  "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. .",
  "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
},

[
  {
    "title": "Technical SEO with Hygraph",
    "slug": "technical-seo-with-hygraph",
    "date": "2020-05-05T00:00:00.000Z",
    "excerpt": "Get started with your SEO implementation when using a Headless CMS",
    "tags": ["SEO"],
    "coverImage": {
      "url": "https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/resize=fit:clip,height:400,width:400/Ey8F3QcRzKVWqn9W7Pl7",
      "id": "ckhz8xs9k1sv60952ql0sflru"
    },
    "id": "ckadrcx4g00pw01525c5d2e56"
  },
  {
    "title": "Union Types and Sortable Relations with Hygraph",
    "slug": "union-types-and-sortable-relations",
    "date": "2020-05-01T00:00:00.000Z",
    "excerpt": "Learn more about Polymorphic Relations and Sortable Relations with Hygraph",
    "tags": ["Union Types"],
    "coverImage": {
      "url": "https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/resize=fit:clip,height:400,width:400/OUT7id5vT2XOaLEMAspU",
      "id": "ckhz8z76w1rpy0a53x96s7wkd"
    },
    "id": "ckadrfuu000pe0148kels2b5e"
  }
]

<script>
  import { graphql, query } from '$houdini'
  const { data } = query(graphql`
    query AllPosts {
      posts {
        title
        slug
        date
        excerpt
        tags
        coverImage {
          url(
            transformation: {
              image: {
                resize: { width: 400, height: 400, fit: clip }
              }
            }
          )
        }
      }
    }
  `)
  const { posts } = $data
</script>

<svelte:head>
  <title>Houdini with Hygraph | Welcome</title>
</svelte:head>

<h1>Houdini with Hygraph</h1>
<p>
  An example project using the Hygraph blog template and Houdini for
  the GraphQL client
</p>

{#each posts as { title, slug, excerpt, coverImage, tags }}
  <div>
    <figure>
      <img src={coverImage.url} alt={`Cover image for ${title}`} />
    </figure>
    <div>
      <h2>{title}</h2>
      <p>{excerpt}</p>
      <div>
        {#each tags as tag}
          <span>{tag}</span>
        {/each}
      </div>
      <div>
        <a sveltekit:prefetch href={`/posts/${slug}`}>
          Read &rArr;
        </a>
      </div>
    </div>
  </div>
{/each}

# make the posts directory
mkdir src/routes/posts
# make the [slug].svelte file
touch src/routes/posts/'[slug]'.svelte

query PostQuery($slug: String!) {
  post(where: { slug: $slug }) {
    title
    date
    tags
    content {
      html
    }
  }
}

<script>
  import { graphql, query } from '$houdini'
  const { data } = query(
    graphql`
      query PostQuery($slug: String!) {
        post(where: { slug: $slug }) {
          title
          date
          tags
          # author
          content {
            html
          }
          # coverImage
        }
      }
    `
  )
  const { post } = $data
</script>

<pre>{JSON.stringify(post, null, 2)}</pre>

<script context="module">
  export const PostQueryVariables = ({ params }) => {
    const { slug } = params
    return {
      slug,
    }
  }
</script>

<script context="module">
  export const PostQueryVariables = ({ params }) => {
    const { slug } = params
    return {
      slug,
    }
  }
</script>

<script>
  import { graphql, query } from '$houdini'
  const { data } = query(
    graphql`
      query PostQuery($slug: String!) {
        post(where: { slug: $slug }) {
          title
          date
          tags
          author {
            name
            authorTitle: title
            picture {
              url(transformation: { image: { resize: { fit: clip, height: 50, width: 50 } } })
            }
          }
          content {
            html
          }
          coverImage {
            url
          }
        }
      }
    `
  )
  const { post } = $data
  const {
    title,
    coverImage,
    author: { picture, name, authorTitle },
    date,
    tags,
    content: { html },
  } = post
</script>

<svelte:head>
  <title>Houdini with Hygraph | {title}</title>
</svelte:head>

<img src="{coverImage.url}" alt="{`Cover" image for ${title}`} />

<h1>{title}</h1>

<a href="/" class="inline-flex items-center mb-3">
  <img src="{picture.url}" alt="{name}" />
  <span>{name}</span>
  <span>{authorTitle}</span>
</a>

<p>{new Date(date).toDateString()}</p>

{#if tags} {#each tags as tag}
<span>{tag}</span>
{/each} {/if}

<article>{@html html}</article>