Update Sapper documentation

[imCorfitz]

This part should be updated:

// query a subset of the preloaded (the rest if for Account)
  const preferences = query(client, GET_PREFERENCES);

to

// query a subset of the preloaded (the rest is for Account)
  const preferences = query(client, {query: GET_PREFERENCES});

I kept getting errors about me not wrapping my query in a gql tag..

---

I also kept getting errors about fetch not being set globally and that I had to pass it as node-fetch in the creation of Apollo Client.

I found you answer online about installing node-fetch and include in server.js along with global.fetch = fetch;... This didn't work for me. I had to import node-fetch in the apollo-client.js file and pass it as second parameter.

This caused another issue with Rollup as node-fetch uses some packages and gets them relative to its directory path. In order to solve those errors I added:

resolve({ preferBuiltins: true, mainFields: ['browser'] })

to the rollup config file.

If anyone has a better solution to this - please let me know.. Cheers.

[jerriclynsjohn]

Can you share the repo/code of your working example @CorfitzMe and @timhall This looks like a prominent issue in setting up for Sapper. There should be a straight forward way to solve the issue, if you have a working code sample do let us know because the example mentioned in README is erroneous.

[imCorfitz]

I am preparing a small repo with my working version - but I realised I am using the sapper-start project: https://github.com/matt3224/sapper-start for having SASS support. That is the reason for me having to add the resolve({ preferBuiltins: true, mainFields: ['browser'] }) to rollup.config.js

[imCorfitz]

@rococosans has actually made a great working demo here: https://github.com/rococosans/sapper-svelte-apollo-demo/.

[joakim]

One thing that might bite people is that node-fetch must be listed under dependencies in package.json, not under devDependencies. Anything Sapper needs available at runtime apparently has to be in dependencies, so I also put any graphql-* and apollo-* packages there. If you get lots of unexpected errors, that might be the answer.

[imCorfitz]

This is my working repo using the sapper-start template by @matt3224.
https://github.com/CorfitzMe/sapper-w-svelte-apollo

[ghost]

@CorfitzMe thanks for the shout out! Sorry, I'm just seeing this.

[sorry in advance for the novel]

In your example repo

<script context="module">
  import client from '../lib/apollo';
  import { gql } from 'apollo-boost';
  
  const EVERYTHING = gql`
    query everything{
      todos {
        data {
          id
          title
          completed
        }
      }
    }
  `;

  export async function preload() {
    return {
      cache: await client.query({
        query: EVERYTHING
      })
    }
  }  
</script>

<script>
  import { setClient, restore, query } from 'svelte-apollo';
    export let cache;
    restore(client, EVERYTHING, cache.data);
    
    const todos = query(client, { query: EVERYTHING });
</script>

could be done like this:

<script context="module">
...
</script>

<script>
    let todos = $$props.cache.data.everything
</script>

This method removes svelte-apollo as a dependency. Which I don't mean to discourage this project in way! I think there is a discussion to be had and many improvements that are still to come.

Full disclosure I haven't tested this method with dynamic variables, so maybe that's were svelte-apollo comes in.

Also, the idea has been proposed to make a special script tag like...

<script context="graphql">
  import client from '../../graphql.js'

  const SOMETHING_QUERY = gql`
    query SOMETHING_QUERY {
      somethingQuery {
        name
        description
        slug
      }
    }
  `

  const thing = client.query({
    query: SOMETHING_QUERY,
  })
</script>

[ghost]

Twist: Either method only seems to work from the route directory and not in nested components.

The method I showed above works in src/routes/blog/index.svelte, but not in src/routes/index.svelte

This is interesting. Can anyone make sense of this?

[imCorfitz]

@rococosans Something as simple as import client from '../../graphql.js' to import client from '../graphql.js' - would that solve it?

__

And yes.. I noticed you can't make these request directly from nested components as SSR. I like the proposal on a dedicated graphql tag, and I know there is a preprocessor in the making for exactly that.. I am looking very much forward to see how that will work.

[ghost]

After restarting the server I was able to get the following working again from src/routes/index.svelte.

const posts = $$props.cache.data.allBlogMarkdown

I was able to remove

export let cache
restore(client, ALL_BLOG_MARKDOWN_QUERY, cache.data)
const posts = query(client, { query: ALL_BLOG_MARKDOWN_QUERY })

Interested in learning, how come querying from a nested component breaks SSR?

All good things here. I'm looking forward to seeing how that solution turns out as well.

[justinmoon]

I tried @rococosans solution above.

When my cache received updates (e.g. logout out user) my components (e.g. navbar) didn't receive updates and displayed outdated data.

Is this expected @rococosans? Should your snippet be able to subscribe to cache changes?

[ghost]

@justinmoon I've opted for a custom graphql client. (Significant bundle savings) It's certainly a paired down solution, but it does what I need it to. I don't currently have a caching strategy implemented specifically with grahpql.

Either way I think your question is more related to session management and SSR. I'm not completely satisfied with my solution just yet, but it involves re-hydrating after session changes.

[timhall]

Will track this issue with #9