vicious-gold

Dynamic segments of the queryKey are undefined on page refresh and initial mount

What is the best way to handle this...? With Vue, I put the queryKey value inside a ref and I use watchEffect to update it and use refetch to fetch data for the first time to have it registered under the right queryKey

  const currentUser = inject<CurrentUserInject>("current-user");
  const queryKey = ref(`/carts/${currentUser?.data.value?.cartId}`);

  const { data, refetch, error, isPending } = useQuery({
    queryKey: [queryKey],
    queryFn: async () => {
      try {
        const { data } = await Axios.get<Cart>(
          `/carts/${currentUser?.data.value?.cartId}`
        );
        return data;
      } catch (err) {
        console.log("error fetching cart data");
        return null;
      }
    },
    enabled: false,
  });

  watchEffect(() => {
    if (!!currentUser?.data.value?.cartId) {
      queryKey.value = `/carts/${currentUser?.data.value?.cartId}`;
      refetch();
    }
  });

  const currentUser = inject<CurrentUserInject>("current-user");
  const queryKey = ref(`/carts/${currentUser?.data.value?.cartId}`);

  const { data, refetch, error, isPending } = useQuery({
    queryKey: [queryKey],
    queryFn: async () => {
      try {
        const { data } = await Axios.get<Cart>(
          `/carts/${currentUser?.data.value?.cartId}`
        );
        return data;
      } catch (err) {
        console.log("error fetching cart data");
        return null;
      }
    },
    enabled: false,
  });

  watchEffect(() => {
    if (!!currentUser?.data.value?.cartId) {
      queryKey.value = `/carts/${currentUser?.data.value?.cartId}`;
      refetch();
    }
  });

This works fine, but I was wondering if there is a way the undefined queryKey ( /carts/undefined) could be avoided. Cheers and thanks! ❤️

10 Replies

crude-lavender•2y ago

Replace ref with computed and pass it to enabled and queryKey. This will also allow to remove watchEffect/refetch completely.

crude-lavender•2y ago

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgYwuArjApgEwDRzAB2AVlsvAL5wBmUacARAG7paMDcAUKJLInHQBnLAEU2UAJ5xqdBowACMAIZEhK5AGsA9KywBaAI4TJnHuGjwAggA9gEIbXogmyuw7M8i2KDWXIsOABhdCgoLG8AVREoAElScngELjhUuBxlFQB+AC5EFLTC5mUAGzZc-MKqtORlWFicCvUoYgBzAurKDpkuLq8fPwDguqTu4Bw85rbuPtQ1eGRQ8KiYuABeQgSKAB4QsIiYaKw4rZgAPgAKRkX9731hY8YASm459RQRhvWUNDBMXAuFye6zOKCWByOUCyADoMtlocUylgYbV6jgXlwuG8kulMsoCMd6FACMAhAAFCI4Noyb4PcTHSQXZKFYwMgDSWEkeQA2gByVEwIS8ggChoAXTw3VZUgAYkQ8sohJIiMg4ECQZVqoQaGqAISinAI0psYHMrWFGAAC3oAHc4EQsHaAKJhaAXXlBEZwWIAEUIjhApKEbV5GPNXXN2IEcOUNI2yhtymA1ncQmhrSwMF2I0uAANtAKhNoACQIA1GpGUXNhrXhGChIi4lTcQqUSWFCLKABGJVweVQGGwOEBwLWoN1+s+hsRJsllBeQA

TS Playground - An online editor for exploring TypeScript and JavaS...

The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.

crude-lavender•2y ago

when cartId changes queryKey will update and you effectively get a new query. vue-query will then refetch data if it's required

vicious-goldOP•2y ago

Excellent! This looks much cleaner, thanks!

vicious-goldOP•2y ago

I just had a chance to give your solution a shot and this is exactly what happened 🥳 No duplicate network requests, no data appended to a key with "undefined", just a single empty key with null

vicious-goldOP•2y ago

so I suppose then that my mistake was to put a single interpolated string inside the query key array, it should have been an array of variables instead?

crude-lavender•2y ago

I can recommend this article https://tkdodo.eu/blog/effective-react-query-keys. It covers why queryKey is an array and how to define your query keys for better results. from your screenshot i can recommend updating queryKey for profiles as well

vicious-goldOP•2y ago

oh that's great

crude-lavender•2y ago

will make it easier to invalidate and just let vue-query do it's job 🙂

vicious-goldOP•2y ago

ah, well spotted, will definitely have to fix that 👍

Gaming

Programming

Dynamic segments of the queryKey are undefined on page refresh and initial mount

Did you find this page helpful?