AxelSorensen
AxelSorensen
PostsComments
NNuxt
Created by AxelSorensen on 10/24/2024 in #❓・help
Composables that depend on eachother
I want to cache the data so I don't need to refetch it on each page navigation. However much of the data fetched from my composables relies on the current user. I do "await getCurrentUser" before passing this value into many of my functions, however I want to clear all my caches and refetch when a user signs in or out. Usually I would use refreshNuxtData but it seems to me that this only works with data in the same scope: https://github.com/nuxt/nuxt/issues/26165 Having to export a refresh function from each of my useasyncdata composables and then running them all at the same time seems cumbersome Is there perhaps a better way?
9 replies
NNuxt
Created by AxelSorensen on 10/24/2024 in #❓・help
Composables that depend on eachother
Thanks a lot @zoobzio That's what I ended up doing 
const { data: episodes } = useAsyncData(`episodes-from-season-${season_id}`, async () => {

        // Fetch season document to get the episode IDs
        const epDocRef = doc(db, 'seasons', season_id)
        const ep_ids = await getDoc(epDocRef)
        const ep_ids_ = ep_ids.data()?.episodes
        // Query the episodes based on the episode IDs
        const eps = await getDocs(query(collection(db, 'episodes'), where(documentId(), 'in', ep_ids_), orderBy('date', order)))

        // Return the episodes data

        return eps.docs.map(doc => ({ id: doc.id, ...doc.data() }))

    }, {// Fetch data immediately
        transform: (data) => {
            return {
                data,
                fetchedAt: Date.now(),
            }
        },
        getCachedData: (key) => {
            const cachedData = nuxt.payload.data[key] || nuxt.static.data[key]
            if (!cachedData) {
                return
            }
            if (Date.now() - cachedData.fetchedAt > 1000 * 60) { // 1 minute cache
                return
            }
            console.log('returning cache')
            return cachedData
        }
    })
const { data: episodes } = useAsyncData(`episodes-from-season-${season_id}`, async () => {

        // Fetch season document to get the episode IDs
        const epDocRef = doc(db, 'seasons', season_id)
        const ep_ids = await getDoc(epDocRef)
        const ep_ids_ = ep_ids.data()?.episodes
        // Query the episodes based on the episode IDs
        const eps = await getDocs(query(collection(db, 'episodes'), where(documentId(), 'in', ep_ids_), orderBy('date', order)))

        // Return the episodes data

        return eps.docs.map(doc => ({ id: doc.id, ...doc.data() }))

    }, {// Fetch data immediately
        transform: (data) => {
            return {
                data,
                fetchedAt: Date.now(),
            }
        },
        getCachedData: (key) => {
            const cachedData = nuxt.payload.data[key] || nuxt.static.data[key]
            if (!cachedData) {
                return
            }
            if (Date.now() - cachedData.fetchedAt > 1000 * 60) { // 1 minute cache
                return
            }
            console.log('returning cache')
            return cachedData
        }
    })
However now I am facing an issue with the caching.
9 replies
NNuxt
Created by AxelSorensen on 10/6/2024 in #❓・help
Calling child function in dynamic route [id].vue
Ok, I actually ended up solving this! So if anyone has the same issue: It doesn't work if you use the dynamic route structure pages/projects/[id].vue But it does work if you use: pages/projects/[id]/index.vue
2 replies
NNuxt
Created by AxelSorensen on 7/30/2024 in #❓・help
How to store user-entered API key and access in server/api
But can I access that in my api route without sending it through the body?
7 replies
NNuxt
Created by AxelSorensen on 7/30/2024 in #❓・help
How to store user-entered API key and access in server/api
I only want it to persist during the session. I don't do any user login
7 replies
NNuxt
Created by AxelSorensen on 7/18/2024 in #❓・help
Automatic pending state for data being fetched?
Because if I need to store it in a variable I need different variables for each field. This is what I'm trying to avoid
30 replies
NNuxt
Created by AxelSorensen on 7/18/2024 in #❓・help
Automatic pending state for data being fetched?
Yes but can you show me an example of using "status" when fetching something on click without having to store it in a variable
30 replies
NNuxt
Created by AxelSorensen on 7/18/2024 in #❓・help
Automatic pending state for data being fetched?
Thanks @Mähh I would really like to not have to initialize my variables as objects with pending and data keys as this clutters the code. My dream scenario is simply that I can somehow check if a variable is currently in a "fetching state" For example imagine: 
let data = 'Hello'
data = await someFunctionThatReturnsWorldAfter1Second
let data = 'Hello'
data = await someFunctionThatReturnsWorldAfter1Second
I wonder whether a value that is currently being assigned with await has some kind of metadata associated with it that I could query to trigger my loading animation.
30 replies
NNuxt
Created by AxelSorensen on 7/18/2024 in #❓・help
Automatic pending state for data being fetched?
I would like the message variable to reveal a pending state when awaiting assignment. I tried checking whether my variable == Promise, but this didn't work
30 replies
NNuxt
Created by AxelSorensen on 7/18/2024 in #❓・help
Automatic pending state for data being fetched?
Thanks a lot! This looks promising Do you think that a variable that is currently being assigned to an awaited fetch has some tell? For example: 
<template>
  <div>
    <button @click="handleClick">Click me</button>
    <p v-if="message.pending">Loading</p>
    <p v-else>{{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// Create a reactive reference to hold the message
const message = ref('');

// Define the async function
const fetchMessage = async () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Hello World');
    }, 1000);
  });
};

// Handle the button click event
const handleClick = async () => {
  message.value = await fetchMessage();
};
</script>
<template>
  <div>
    <button @click="handleClick">Click me</button>
    <p v-if="message.pending">Loading</p>
    <p v-else>{{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// Create a reactive reference to hold the message
const message = ref('');

// Define the async function
const fetchMessage = async () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Hello World');
    }, 1000);
  });
};

// Handle the button click event
const handleClick = async () => {
  message.value = await fetchMessage();
};
</script>
30 replies
NNuxt
Created by AxelSorensen on 7/18/2024 in #❓・help
Automatic pending state for data being fetched?
Take a look at my example in my post: I want a wrapper around any data, that will show the data if it is fetched or default to a loading indicator. This would mean that in my main app I could handle all the data fetching and as long as i wrap my data in this wrapper: <wrapper>{{data}}</wrapper> or pass it as a prop <wrapper :data="data"/> Would show "loading" or "data" depending on the fetchstate of the given data
30 replies
NNuxt
Created by AxelSorensen on 7/18/2024 in #❓・help
Automatic pending state for data being fetched?
Right, but what I would really love is to automatically detect that data is being awaited and whenever it is, display some arbitrary loading indicator. I know this can be done with <Suspense/> in React for example, but again this only applies to first time the data is being fetched it seems
30 replies
NNuxt
Created by AxelSorensen on 7/18/2024 in #❓・help
Automatic pending state for data being fetched?
But this doesn't solve the issue of having multiple pending variables if I have 100 different fields that I need to fetch with each their "loading" fallback text.
30 replies
NNuxt
Created by AxelSorensen on 7/18/2024 in #❓・help
Automatic pending state for data being fetched?
No description
30 replies