CODEWITHSUNDEEP
javascriptsveltesvelte-3
Rmanx77
Rmanx77

Reputation: 231

why context is undefined in svelte

I'm working on a component and i need to use context for it. But i don't know why when i using getContext, It's undefined.

This is a part of my codes on first component (Index Component):

import { setContext } from 'svelte';
import {onMount} from "svelte";

let tempSuggest;

const suggestModel = {
   category_id: 1,
   title: "",
   images: [{}],
   catalogues: [{}],
   dependent_attributes: [{}],
   independent_attributes: [{}],
};

$: tempSuggest = Object.assign({}, suggestModel);

onMount(() => {
   setContext(clientProductSuggest, tempSuggest);
});

In html codes of first component (loading sub components in the end of index file):

<svelte:component this={component} {...props}/>

In second component:

import { getContext } from 'svelte';
const c = getContext('clientProductSuggest');

console.log(c);

And now context is undefined.

Upvotes: 7

Views: 4012

Answers (3)

RomanistHere
RomanistHere

Reputation: 904

It's not probably not going to cover this question but keep in mind that getContext is only gonna work for children of the setContext component.

For cross-component sharing we should use stores.

I am writing this answer because if I had found it here, it would have saved me a few hours of research and posting to the svelte community chat.

Upvotes: 14

cassepipe
cassepipe

Reputation: 652

Yes you can make it a store to make it have the right value but in fact that's just working around the initial problem :

I don't know why but reactive statements/blocks are executed only at the end of component initilization. So the real order of execution is :

import { setContext } from 'svelte';
import {onMount} from "svelte";

let tempSuggest;

const suggestModel = {
   category_id: 1,
   title: "",
   images: [{}],
   catalogues: [{}],
   dependent_attributes: [{}],
   independent_attributes: [{}],
};

setContext("clientProductSuggest", tempSuggest);

$: tempSuggest = Object.assign({}, suggestModel);

... and now it makes sense.

I have no idea why this is the case. Bute here the docs indeed state : Reactive statements run after other script code and before the component markup is rendered

If you want to play around: https://svelte.dev/repl/6ba4692567754a8f8e3499a3ed38edf3?version=3.59.1

Upvotes: 0

Stephane Vanraes
Stephane Vanraes

Reputation: 16451

This is because contexts in Svelte are not reactive by default, when you assign tempSuggests to the context it is in fact undefined

In order to get reactivity in your context you should create tempSuggests as a store:

import { setContext } from 'svelte';
import { writable } from "svelte/store";

let tempSuggest = writable({});

const suggestModel = {
   category_id: 1,
   title: "",
   images: [{}],
   catalogues: [{}],
   dependent_attributes: [{}],
   independent_attributes: [{}],
};

$: tempSuggest.update(value => Object.assign(value, suggestModel));
setContext('clientProductSuggest', tempSuggest);

Also consider the following:

  • setContext does not have to be called inside onMount
  • the first argument of setContext should be a string (I added '')
  • suggestModel is now a store and should be treated as such in the children

Upvotes: 1

Related Questions