Error: Function called outside component initialization

[albertms10]

While setting up svelte-apollo with Sapper (#9), as there is no main App.svelte component, I tried to set the client in the _layout.svelte file.

<!-- _layout.svelte -->
<script lang="ts">
  import { setClient } from "svelte-apollo";
  import client from "../database/apollo";

  setClient(client);
</script>

However, I get the following error:

Uncaught (in promise) Error: Function called outside component initialization
    at get_current_component (index.mjs:629)
    at setContext (index.mjs:659)
    at setClient (svelte-apollo.es.js:14)
    at _layout.svelte:33
    at run (index.mjs:18)
    at Array.map (<anonymous>)
    at index.mjs:1390
    at flush (index.mjs:723)
    at init (index.mjs:1477)
    at new App (App.svelte:17)

Where should I set the client instead?

Edit

In previous versions of v0.3.0, the solution that https://github.com/timhall/svelte-apollo/issues/9#issuecomment-612456525 comments would work fine, but in v0.4.0 we must set the client with the proper method.

[patrickleet]

you need to add svelte-apollo as a dev dependency not a dependency

[albertms10]

Whoops, totally correct. Thanks!

[patrickleet]

well, it's not exactly intuitive - I made the same mistake :)

[SamJacobs]

@patrickleet why would you add it as a dev dependency? it's part of the build right? i did try that and it's still not fixing the problem for me, where does that fix come from?

[patrickleet]

https://github.com/sveltejs/sapper/issues/592

[patrickleet]

A bundle is created so technically most of the deps can just exist for the build step.

I saw more discussion somewhere about what should and shouldn't be a devDep with that in mind but can't find where that was.

[fnune]

I have the same problem and moving svelte-apollo to dev dependencies doesn't help:

// App.ts
<script lang="ts">
  import { ApolloClient, InMemoryCache } from "@apollo/client"
  import { setClient } from "svelte-apollo"

  setClient(new ApolloClient({ cache: new InMemoryCache() }))
</script>

<main />

<style lang="scss">
</style>

One special aspect of my setup is that I have a Yarn workspace and my Svelte app (built with Svelte-Kit) sits inside one of its packages. So the node_modules directory is on the root of the workspace, and the Svelte app has its own node_modules directory that contains only .vite and .bin.

[flashspys]

If svelte is built by vite, you have to add svelte-apollo to the optimizeDeps.exclude array in vite.config.js Should this piece of information be added in the readme?

[markusschmitz53]

dd svelte-apollo to the optimizeDeps.exclude array in vite.config.js Should this piec

Unfortunately, this doesn't solve the issue at hand.