'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)
- 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
- 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. - The
<FruitCards />, depending if it's id is on alet editing = []or not, will either render the fruit object inside an "editing mode" card (<EditFruitCard />) or a "view mode" card (<ViewFruitCard />). - 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 |
|---|
