GraphQL

[carstenjaksch]

How would you consume a GraphQL API with Primo components?

I tried to use Houdini, but it requires some initial setup that I am unable to replicate with Primo.

[carstenjaksch]

I made it using urql! 🎉

Tested that without setContextClient and getContextClient in a single component. But it would be good to have a working context, because I want to use the same client in multiple sections.

Is there a parent component that holds all sections, so that I could use the context API?

My code so far:

import { createClient, gql, queryStore } from '@urql/svelte'

const client = createClient({
  url: 'https://api.endpoint.com/graphql',
})

$: products = queryStore({
  client,
  query: gql`
    query {
      products {
        edges {
          node {
            name
          }
        }
      }
    }
  `,
})

[mateomorris]

I tried setting client to a global variable and it seems to work, let me know

import { createClient, gql, queryStore } from "@urql/svelte";

let clientReady
function setClient() {
  if (!window.graphql_client) {
    console.log("Creating client", window.graphql_client);
    window.graphql_client = createClient({
      url: "https://api.endpoint.com/graphql",
    });
  } else {
    console.log("Client exists", window.graphql_client);
  }
  clientReady = true
}

setClient();

let products // <---
$: if (clientReady) {
  products = queryStore({
    client: window.graphql_client,
    query: gql`
    query {
      products {
        edges {
          node {
            name
          }
        }
      }
    }
  `,
  });
}

This is really cool by the way! I'd love to see your component for this if you have HTML/CSS for it, if you'd like to share 😄

[carstenjaksch]

Just experiments at the moment but I will share something when ready.

I tried that but now 'products' is not defined. Maybe some basic Svelte stuff that I need to adapt and am not aware of (see HTML).

My HTML:

{#if $products.fetching}
<p>Loading...</p>
{:else if $products.error}
<p>Oh no... {$products.error.message}</p>
{:else}
<ul>
  {#each $products.data.products.edges as product}
  <li>{product.node.name}</li>
  {/each}
</ul>
{/if}

[mateomorris]

Oh sorry, missed that error. Just need to declare the variable, updated.

[carstenjaksch]

Thanks, didn't see that either. 😄

Now it works, but I'd like to have that globally.

I extracted the function to a script inside Site > "Before </body>":

<script context="module">
  import { createClient } from '@urql/svelte'

  window.graphql_client = createClient({
    url: 'https://api.endpoint.com/graphql',
  })
</script>

The component script looks like that now:

import { gql, queryStore } from '@urql/svelte'

let products
$: if (window.graphql_client) {
  products = queryStore({
    client: window.graphql_client,
    query: gql`
      query {
        products {
          edges {
            node {
              name
            }
          }
        }
      }
    `,
  })
}

It works so far. Is that viable or do you see any issues?