Error: Function called outside component initialization

[beebase]

I'm trying to refactor some CRUD functions from some Svelte (gui) components into a JS file. Does svelte-apollo also work within a regular js file or do I need to instantiate query and mutation inside the script tags of a Svelte component?

This works inside a Svelte component

<script>
import {mutation} from 'svelte-apollo'
const gqlUpdate = mutation(sMutationQuery)
const update = () => {
 gqlUpdate({
    variables: obj
  })
}
</script>

This throws an error in a regular js file when trying to call update() from a component Error: Function called outside component initialization

import {mutation} from 'svelte-apollo'
export const update = () => {
 const gqlUpdate = mutation(sMutationQuery)
 gqlUpdate({
    variables: obj
  })
}

[xpol]

I have encountered the same problem, and finally solved this by copy the svelte-apollo code to my own repo and modify the context.ts to use a global variable rather than svelte context:

import type { ApolloClient } from "@apollo/client";

let globalClient: ApolloClient<any>

export function getClient<TCache = any>(): ApolloClient<TCache> {
	const client = globalClient;

	if (!client) {
		throw new Error(
			"ApolloClient has not been set yet, use setClient(new ApolloClient({ ... })) to define it"
		);
	}

	return client as ApolloClient<TCache>;
}

export function setClient<TCache = any>(client: ApolloClient<TCache>): void {
	globalClient = client
}

[LucasGabrielBecker]

Same problem here, but i couldn't find where to put these.

[markusschmitz53]

Same issue here. Couldn't make @xpol's code work either. Still seeing the error when trying to execute a query from a function within the script block of a .svelte component.

[grodasgomez]

To fix that problem I did the following: I have my file graphql.service.ts, which contains a function createAddMutation that returns a closure.

import type { MutationBaseOptions } from "@apollo/client/core/watchQueryOptions";
import type { DocumentNode } from "graphql";
import { mutation, query } from "svelte-apollo";

export const createAddMutation = (mutationQuery: DocumentNode) => {

  const mutationObject = mutation(mutationQuery);
  async function applyMutation(options: MutationBaseOptions): Promise<boolean> {
    try {
      await mutationObject(options);
      return true;
    } catch (error) {
      console.log(error);
      return false;
    }
  }
  return applyMutation;

}

So, I initialize my mutation from the svelte component and use it where I need it:

<script lang="ts">
import { createAddMutation } from "../../services/graphql.service";
const addReading = createAddMutation(ADD_READING);
...
async function onSubmit(values: AddReadingDto){
  const result = await addReading({variables:{...values}});
  console.log(result);
}
...
</script>

[markusschmitz53]

hey @grodasgomez it seems to me your code doesn't fix the issue, as you still call the closure from within component context? If you were to try and call createAddMutation() from any .js file (as op wrote) you still get the "Function called outside component initialization" error.

[grodasgomez]

@markusschmitz53 you're right, I misunderstood the problem, my code only works if we call it from a .svelte file, I think we can't call it from a regular js file for now. If the base code is refactored to something like @xpol's code, we'll be able to do it

[aeviou]

@timhall Multiple forks have been made to address this issue. I can make a PR for it if the repo is being maintained

https://github.com/tenno-dev/svelte-apollo/commit/c95741b08b7798161b8104ee4bfa956508cea7f2 https://github.com/samhingu/svelte-apollo/commit/bb9365578778738182e2be02198a3a1ea2f3ab66 https://github.com/neoel/svelte-apollo/commit/39bf653459427dcbf9da8327e9701177f8cfb245

[power-f-GOD]

Hi, guys.

Any updates on this? @timhall

[beebase]

@timhall Multiple forks have been made to address this issue. I can make a PR for it if the repo is being maintained

tenno-dev@c95741b samhingu@bb93655 neoel@39bf653

@timhall Any plans on merging this fix? I'd also like to know if you are planning to maintain svelte-apollo in the future. I don't mind switching to something else but would like to know before doing so. Thanks.

[rigdal]

Its been many months and still nothing on this. Safe to assume @timhall is no longer supporting.