Fetch & refresh data with urql

[m4rvr]

Hey!
Currently, I only fetch my data if the store doesn't have it already, which works good until I want to manipulate the data e.g. adding an entry by submitting a form. Because the store already has data in it, it doesn't refetch and update the previous stored data.

My code looks like this

<script setup>
import { ref } from 'vue';
import { useStore } from '@/store';
import  { useClientHandle } from '@urql/vue';

const handle = useClientHandle();
const store = useStore();
const items = ref(store.items || []);

if (!items.value.length) {
  const { data } = await handle.client.query(`
    query AllItems {
      allItems {
        id
        name
      }
    }
  `);

   items.value = data.value.allItems || [];

   if (import.meta.env.SSR) {
     store.items = items.value;
   }
}

const addItem = () => {
  // Mutation here, adds an item in the database...
  
  // I tried to store the new result in the store like
  store.items = newResult;
  // But it doesn't update the initialData. Probably it gets overriden before?
}
</script>

If I remove the if (!items.value.length), it works because it always refetches the current data. But it also calls the query on each request. Because of this, the shown data "flickers" a bit.

What would be the workaround for this? I think it's not urql related, but has to do with refetching the latest data if I'm right.
Maybe setting a kind of flag to trigger the code inside the if() would help?

[frandiox]

I'm not sure if I understand the whole picture, but I think you only want to run the query if store.items === undefined (instead of items.length === 0), perhaps?

Otherwise maybe adding a new flag to the initial state as you need. Mixing 2 state management libraries always get a bit complicated 😅

About the addItem function not updating initialState: I don't think that function runs in SSR, right? It sounds like a function that runs when a user clicks on a button or something like that?

[m4rvr]

Ah, sure. The check for undefined totally makes sense, I will try that. 😁

Exactly, the addItem function runs when the user clicks the button.