Sveltekit + Urql + SSR

[kamalkech]

I can get data just in client side,
but for SSR data empty and still in step : fetching

any idea how solve this probleme ?

Tnx

[Conduitry]

Please use one of the issue templates and please provide a reproduction.

[benmccann]

This type of question is probably better asked on Discord or StackOverflow

[kamalkech]

@benmccann already asked in discord by no result, so why you close it hhh

[babichjacob]

We couldn't help you in the Discord server, or here, because we haven't been provided any of your code to look at. The best I was able to do was point you to solving the only urql + SvelteKit error I knew of:

put

  optimizeDeps: {
       exclude: ["@urql/svelte"]
   }

in your vite config and move @urql/svelte from devDependency to dependency

[kamalkech]

@babichjacob i already do that, and i get data and no in SSR mode

[babichjacob]

@babichjacob i already do that, and i get data and no in SSR mode

We still don't know what code you wrote.

[kamalkech]

yesterday i already send to you capture of my code, i try to youse load function in context=module but still probleme, any way plz check this captures :

[babichjacob]

There is nothing in your code that would make server side page rendering wait until the query is resolved. Do work like this in load per SvelteKit's docs.

[benmccann]

This is a hard way for us to reproduce because we would need to type the code from the screenshot and their may be other code that's important elsewhere in the application that's not included. A repo that reproduces this would be a lot more helpful

[kamalkech]

@babichjacob with this i get error:
500
Function called outside component initialization

Error: Function called outside component initialization

<script context="module">
  import { initClient, operationStore, query } from '@urql/svelte';

  export async function load({ page, fetch, session, context }) {
    initClient({
      url: 'http://localhost:4000/graphql',
    });

    const articles = operationStore(`
      query {
        articles {
          _id
          title
          article_categories {
            _id
            name
          }
        }
      }
    `);

    query(articles);

    articles.subscribe((d) => console.log(`d`, d));

    return {
      props: {
        articles,
      },
    };
  }
</script>

<script lang="ts">
  export let articles;
</script>

<h2>Graphql</h2>

{#if $articles.fetching}
  <p>Loading...</p>
{:else if $articles.error}
  <p>Oh no... {$articles.error.message}</p>
{:else}
  <ul>
    {#each $articles.data.articles as article}
      <li>
        {article.title}
        <br />
        Categories:
        {#each article.article_categories as category}
          {category.name},
        {/each}
      </li>
      <hr />
    {/each}
  </ul>
{/if}

[kamalkech]

@benmccann ok understood

[babichjacob]

@babichjacob with this i get error:
500
Function called outside component initialization

Error: Function called outside component initialization

<script context="module">
  import { initClient, operationStore, query } from '@urql/svelte';

  export async function load({ page, fetch, session, context }) {
    initClient({
      url: 'http://localhost:4000/graphql',
    });

    const articles = operationStore(`
      query {
        articles {
          _id
          title
          article_categories {
            _id
            name
          }
        }
      }
    `);

    query(articles);

    articles.subscribe((d) => console.log(`d`, d));

    return {
      props: {
        articles,
      },
    };
  }
</script>

<script lang="ts">
  export let articles;
</script>

<h2>Graphql</h2>

{#if $articles.fetching}
  <p>Loading...</p>
{:else if $articles.error}
  <p>Oh no... {$articles.error.message}</p>
{:else}
  <ul>
    {#each $articles.data.articles as article}
      <li>
        {article.title}
        <br />
        Categories:
        {#each article.article_categories as category}
          {category.name},
        {/each}
      </li>
      <hr />
    {/each}
  </ul>
{/if}

Use createClient and store the value in a client variable instead. You can't use initClient because it implicitly makes a setContext call.

[kamalkech]

@babichjacob still get empty data in SSR using createClient, can you plz share link or same documentation about this topic, cuz i won't to broth u, tnx bro

[babichjacob]

@babichjacob still get empty data in SSR using createClient, can you plz share link or same documentation about this topic, cuz i won't to broth u, tnx bro

I don't know whether or not there is any, nor do I know how to use urql. I only picked this up from previous troubleshooting. (Non-sarcastically) good luck!

[kamalkech]

@babichjacob tnx good luck u too

[kamalkech]

I found solution, it s simple for SSR mode must to add fetch to createClient function:

export async function load({ page, fetch, session, context }) {
    const client = createClient({
      url: 'http://localhost:4000/graphql',
      fetch,
      exchanges: [
        fetchExchange
      ]
    });
    const articles = await client.query(QUERY).toPromise();

    return {
      props: {
        articles: articles,
      },
    };
  }

[frederikhors]

@babichjacob why cannot I use initClient?

Reproduction here: urql-graphql/urql#1660