'Pass Apollo graphql query as a store in Svelte?

Does anyone knows a way to pass the Apollo query as a Svelte store. I don't want put in a store the data that's returned by the query(...) function but the actual query. This is because I want to trigger .refetch()s from other components different that the one the one that is executing the query.

As of today, what I am doing to trigger refetches on other components, is passing down the query object as a prop to other components. I seem to be able to do that through prop-drilling, but when I try to do the same using Svelte stores, I will get all kinds of errors.

A: How I am doing it right now

(Disclaimer: the following is a simplification of the actual repo I'm trying to reproduce this in which you can see here)

  1. Let's say we have the following file-tree composed of a main component where I execute the graphql query with svelte-apollo in order to pass it down to both it's immediate children: <Form/> and <Fruits/>.
src/
 |_ components
     |_Index.svelte --> Here I make the query to get the fruit list
        |_Fruits.svelte
        |  |_FruitCards.svelte 
        |     |_EditFruitCard.svelte --> Refetch after updating a fruit
        |     |_ViewFruitCard.svelte --> Refetch after deleting a fruit
        |_Form.svelte --> Refetch after creating a new fruit

  1. The <Form/> creates a new Fruit in our backend using a mutation. We want to pass the query object to refetch the fruit list right after creating a new fruit. 3.The <Fruits/> component will render the query inside an {#await...} block or {#if} block to show something while the data is loading. Once it's loaded, it will pass the loaded data to the <FruitCards /> component to render the actual obtained data.
  2. The <FruitCards />, depending if it's id is on a let editing = [] or not, will either render the fruit object inside an "editing mode" card (<EditFruitCard />) or a "view mode" card (<ViewFruitCard />).
  3. From <EditFruitCard /> we will make an update mutation, so we will want to trigger a refetch after editing to see the updated list. And from <ViewFruitCard /> we will be able to delete the object, so we will want to trigger a re-render as well.

B: What I wish to do

I wish to import the query object as a Svelte store. I want to execute it on my <FruitCard /> compoenent and want to also import it inside <Form/>, <EditFruitCard/> and <ViewFruitCard/> and use it's .refetch() method to trigger a rerender:

src/
 |_ components
     |_Index.svelte --> Nothing here
        |_Fruits.svelte --> Import here
        |  |_FruitCards.svelte 
        |     |_EditFruitCard.svelte --> Import here
        |     |_ViewFruitCard.svelte --> Import here
        |_Form.svelte --> Import here

Any thoughts?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source