1 reply

Jotai Bug?

Hey, anyone here that has worked with Jotai and is willing to lend me a quick hand about a bug I'm running into? been trying to debug this for 10h and I just don't understand.

I have a simple set up that consists of three parts.
1.- API Calls to fetch an array of data
2.- atom with query that calls the data
3.- a derived atom that spreads the array and joins it with some default data ( for the sake of this example, we'll only use the data returned from the api)

This is the code:

export const fetchTokens = async (get: Getter) => {
    const customTokens = get(customTokensAtom)
    const { data } = await axios.post<Token[]>('/api/tokens', {
        customTokens
    })
    console.log(data.find((v) => v.symbol.toLowerCase() === 'bnb'.toLowerCase()))
    return data
}

export const [tokenListAtom] = atomsWithQuery((get) => {
    return {
        queryKey: ['tokenList_atom'],
        queryFn: () => fetchTokens(get),
        initialData: []
    }
})

export const allTokenListAtom = atom((get) => {
    console.log(get(tokenListAtom).find((v) => v.symbol.toLowerCase() === 'bnb'.toLowerCase()))
    return [...get(tokenListAtom)]
})

export const fetchTokens = async (get: Getter) => {
    const customTokens = get(customTokensAtom)
    const { data } = await axios.post<Token[]>('/api/tokens', {
        customTokens
    })
    console.log(data.find((v) => v.symbol.toLowerCase() === 'bnb'.toLowerCase()))
    return data
}

export const [tokenListAtom] = atomsWithQuery((get) => {
    return {
        queryKey: ['tokenList_atom'],
        queryFn: () => fetchTokens(get),
        initialData: []
    }
})

export const allTokenListAtom = atom((get) => {
    console.log(get(tokenListAtom).find((v) => v.symbol.toLowerCase() === 'bnb'.toLowerCase()))
    return [...get(tokenListAtom)]
})

The issue is the following when checking in the

fetchTokens

fetchTokens

function, the console log doesn't find any data, but when checking in the

allTokensListAtom

allTokensListAtom

function, it does find a result. I have absolutely no idea how this is happening.

The atoms are not being set anywhere, only being read.

TTC

Theo's Typesafe Cult•3y ago•

1 reply

kinsyu

Jotai Bug?

export const fetchTokens = async (get: Getter) => {
    const customTokens = get(customTokensAtom)
    const { data } = await axios.post<Token[]>('/api/tokens', {
        customTokens
    })
    console.log(data.find((v) => v.symbol.toLowerCase() === 'bnb'.toLowerCase()))
    return data
}

export const [tokenListAtom] = atomsWithQuery((get) => {
    return {
        queryKey: ['tokenList_atom'],
        queryFn: () => fetchTokens(get),
        initialData: []
    }
})

export const allTokenListAtom = atom((get) => {
    console.log(get(tokenListAtom).find((v) => v.symbol.toLowerCase() === 'bnb'.toLowerCase()))
    return [...get(tokenListAtom)]
})

export const fetchTokens = async (get: Getter) => {
    const customTokens = get(customTokensAtom)
    const { data } = await axios.post<Token[]>('/api/tokens', {
        customTokens
    })
    console.log(data.find((v) => v.symbol.toLowerCase() === 'bnb'.toLowerCase()))
    return data
}

export const [tokenListAtom] = atomsWithQuery((get) => {
    return {
        queryKey: ['tokenList_atom'],
        queryFn: () => fetchTokens(get),
        initialData: []
    }
})

export const allTokenListAtom = atom((get) => {
    console.log(get(tokenListAtom).find((v) => v.symbol.toLowerCase() === 'bnb'.toLowerCase()))
    return [...get(tokenListAtom)]
})

The issue is the following when checking in the

fetchTokens

fetchTokens

function, the console log doesn't find any data, but when checking in the

allTokensListAtom

allTokensListAtom

function, it does find a result. I have absolutely no idea how this is happening.

The atoms are not being set anywhere, only being read.

Jotai Bug?

Similar Threads

Jotai Bug?

Similar Threads

Similar Threads

Similar Threads