Need full example svelte-apollo with sapper

[shashkovdanil]

Please add full example svelte-apollo with sapper v3. I'm having trouble with this:

In order to initialize Apollo Client, you must specify link & cache properties on the config object.
        This is part of the required upgrade when migrating from Apollo Client 1.0 to Apollo Client 2.0.

[mattpilott]

I think i also need this it's not completely clear from the sapper example. Be great to see the setup using the stock sapper template!

[timhall]

I had been waiting for the various sapper updates to land for svelte v3 before looking into this, but it looks like I missed the memo and it's been released with v0.26 of sapper. I'll take another look at this soon.

[ternpixel]

Would like to see this as well!

[jthegedus]

Apologies for being "that person", but are there any updates on this topic or guidance in the meantime? I have been unable to find a good way of configuring this with Sapper

UPDATE:

I got this working by using _layout.svelte as the point to initialise and set the Client we can then use getClient in each route that uses this layout.

_layout.svelte:

<script>
  import ApolloClient from "apollo-boost";
  import { setClient } from "svelte-apollo";

  const client = new ApolloClient({
    uri: "https://..."
  });
  setClient(client);
</script>

...

index.svelte:

<script>
  import { getClient, query } from 'svelte-apollo'; 
  import { GET_BOOKS } from './queries';

  // 2. Get the Apollo client from context
  const client = getClient();

  // 3. Execute the GET_BOOKS graphql query using the Apollo client
  //    -> Returns a svelte store of promises that resolve as values come in
  const books = query(client, { query: GET_BOOKS });
</script>

<!-- 4. Use $books (note the "$"), to subscribe to query values -->
{#await $books}
  Loading...
{:then result}
  {#each result.data.books as book}
    {book.title} by {book.author.name}
  {/each}
{:catch error}
  Error: {error}
{/await}

This doesn't integrate with the Sapper router, but we can use onMount to perform re-fetches etc. I am yet to try SSR.

[jschuhr]

I took the same approach with _layout.svelte and not just for the svelte-apollo client. Except I put all of that setup into another module (setup.js) and imported from _layout. I just couldn't stomach having all that code actually in my _layout file. It's for layout, supposedly, but it's the only component that is a parent to the whole app.

[jthegedus]

@jschuhr I agree. I am sure this could be done in client.js and server.js but, I myself, do not know how. This was the easiest way forward until this lib integrates with the Sapper primitives.

[F7dev]

@jthegedus when I try to setClient in _layout and then later getClient I get a message: Function called outside component initialization.

The way I get around this is by importing the client directly into the component that calls it.
Is this a problem with Svelte's context?

[ssiemens-hm]

@jthegedus when I try to setClient in _layout and then later getClient I get a message: Function called outside component initialization.

The way I get around this is by importing the client directly into the component that calls it.
Is this a problem with Svelte's context?

Same issue here:

Error: Function called outside component initialization
    at get_current_component (/git/node_modules/svelte/internal/index.js:520:15)
    at Object.setContext (/git/node_modules/svelte/internal/index.js:550:5)
    at Object.setClient (/git/node_modules/svelte-apollo/dist/svelte-apollo.cjs.js:15:12)
    at create_ssr_component (/git/__sapper__/dev/server/server.js:10007:16)
    at Object.$$render (/git/__sapper__/dev/server/server.js:230:22)
    at create_ssr_component (/git/__sapper__/dev/server/server.js:10182:41)
    at $$render (/git/__sapper__/dev/server/server.js:230:22)
    at Object.render (/git/__sapper__/dev/server/server.js:238:26)
    at handle_page (/git/__sapper__/dev/server/server.js:12560:36)

[phi1-h]

I used the onMount hook around the setClient(), maybe that helps.
EDIT: The error reappears when calling the getClient()
EDIT 2: Fixed, I imported the child before setClient()!

[ssiemens-hm]

I used the onMount hook around the setClient(), maybe that helps.
EDIT: The error reappears when calling the getClient()
EDIT 2: Fixed, I imported the child before setClient()!

Cool. Can you provide an example with some code? In which file did you put the setClient()? Where and how did you call the getClient()? Did you need to use the onMount-Function or the <script context="module">-tag? Every help is much appreciated as the original-tutorial is quite confusing.

[jthegedus]

Hi all, here's what I have working:

setClient in _layout.svelte

<script>
  import { stores } from "@sapper/app";
  import { onMount } from "svelte";
  import ApolloClient from "apollo-boost";
  import { setClient } from "svelte-apollo";

  import Nav from "components/Nav.svelte";
  import NProgress from "nprogress";

  const { preloading } = stores();

  onMount(async () => {
    NProgress.configure({ parent: "#sapper", showSpinner: false });
    preloading.subscribe(loading => {
      if (loading) {
        NProgress.start();
      } else {
        NProgress.done();
      }
    });
  });

  const client = new ApolloClient({
    uri: "https://URL"
  });
  setClient(client);
</script>

<style>
  main {
    position: relative;
    background-color: white;
    margin: 0 auto;
    box-sizing: border-box;
  }
</style>

<Nav />

<main>
  <slot />
</main>

getClient in routes/some_route/index.svelte

<script>
  import { gql } from "apollo-boost";
  import { getClient, query } from "svelte-apollo";

  const client = getClient();
  const GET_DATA = gql`
    query {
      ...
    }
  `;
  const data = query(client, { query: GET_DATA });
</script>

<div>
	{#await $data}
		<div>loading</div>
	{:then result}
		<div>{result}</div>
	{:catch error}
		<div>Error: {error}</div>
	{/await}
</div>

Not sure I did anything special here other than not use getClient in routes/index.svelte

[jerriclynsjohn]

@jthegedus @phi1-h @F7dev @jschuhr @timhall I'm desperately looking to solve this problem, this is a huge show stopper in adopting GraphQL in my sapper project and would love to contribute a template project that works for Sapper. The only thing is I tried everything mentioned in all the issues across this repo and I'm still stranded and seriously tired. I'm forced to use other libraries for PoC for query only, but I wanna exploit the core capabilities.

[jthegedus]

Hi @jerriclynsjohn I don't believe I have done anything special. The only thing of note was that the index route doesn't use the svelte-apollo client, so anything done in _layout.svelte is completely evaluated before I would route elsewhere where client is fetched and used.

[vhfmag]

Hey there! I've just found the same issue and tried the above solutions, but they didn't help me much. After having tried them, I considered avoiding setClient and getClient altogether and simply importing the instantiated client from another module with the hope that the client instance would be reused because of how (I think) modules work.

It doesn't throw anymore and it's working fine so far, but I thought I'd ask people more knowledgeable in Svelte about the consequences of such an approach.

To be clear, there are some sample files:

• src/data/client.js

  import ApolloClient from "apollo-boost";
  import fetch from "isomorphic-unfetch";
  
  export const client = new ApolloClient({ fetch, uri: "..." });

• src/routes/index.svelte

  <script context="module">
    import { gql } from "apollo-boost";
    import { client } from "../data/client";
  
    const indexQuery = gql`query {
      # stuff
    }`;
  
    export async function preload() {
      return { cache: await client.query({ query: indexQuery }) };
    }
  </script>
  
  <script>
    import { restore, query } from "svelte-apollo";
  
    export let cache;
    restore(client, indexQuery, cache.data);
  
    const companiesPromise = query(client, { query: indexQuery });
  </script>
  
  {#await $companiesPromise}
    <div>Loading</div>
  {:then companies}
    <pre>{JSON.stringify(companies)}</pre>
  {:catch error}
    <div>Error: {error}</div>
  {/await}

What am I missing? What are the downsides of such approach?

[teds31]

Without a proper walkthrough of setting this up, we are gonna be stuck in this boat for a while