RTK Query problem: I can see the fetched data in Redux devtools but there no data in hook

Question

I've just started to learn RTK Query and I can't display a component that depends on fetching data(Albums.js). The task is: to display the list of users and buttons, when clicking the button 'albums' I need to display modal with the list of albums having the same id as the clicked user. So, when clicking I can see the albums in Redux Toolkit and in Network calls but there is no data in useGetAlbumsQuery() in the component Albums.js. What is wrong? enter image description here usersApi.js

import {createApi, fetchBaseQuery} from '@reduxjs/toolkit/query/react'

export const usersApi = createApi({
    reducerPath: 'usersApi',
    baseQuery: fetchBaseQuery({baseUrl: 'https://jsonplaceholder.typicode.com/'}),
    tagTypes: ['Users', 'Albums'],
    endpoints: (build) => ({
        getUsers: build.query({
            query: () => `users`,
            providesTags: ['Users'],
        }),
        getAlbums: build.query({
            query: (userId = '') => `albums?userId=${userId}`,
            providesTags: ['Albums'] 
        }),
        transformResponse: response => ({
           response
        }),
        updateAlbums: build.mutation({
            query: (body) => ({
                url: 'albums',
                method: 'GET',
                body,
            }),
            invalidatesTags: [{type: 'Albums'}]
        })

    })
})

export const {useGetUsersQuery, useGetAlbumsQuery} = usersApi

Users.js

import React, {useState} from 'react'
import { useGetAlbumsQuery, useGetUsersQuery } from './redux'
import Albums from './Albums'

const User = () => {
    const {data: users, isLoading, isError} = useGetUsersQuery()
    const [userId, setUserId] = useState()
    useGetAlbumsQuery(userId)

    return (
        <>
            {isLoading && <h1>Loading...</h1>}
            {isError && <h1>Something has gone wrong</h1>}
                <ul>
                    {
                        users?.map(el => (
                            <li key={el.id}>
                                <p>{el.name}</p> 
                                <div>
                                    <button onClick={(e)=> setUserId(e.target.id)} id={el.id}>Albums</button>
                                    <button>Posts</button>
                                </div>
                            </li>
                        ))  
                    }
                </ul>
                <Albums />
        </>
    )
}
export default User

Albums.js

import {useGetAlbumsQuery, useGetUsersQuery} from './redux'

const Albums = () => {
    const {data} = useGetAlbumsQuery()
 
    return (
        <>
            <h3>hello</h3>
                {data?.map(el => {
                 <p key={el.id}>{el.title}</p>
             })}
        </>
    ) 
}
export default Albums

Answer 1

useGetAlbumsQuery(userId) and useGetAlbumsQuery() make two different requests to the server and return different data.

The first might be albums?userId=12 and the seconds will be to albums?userId=undefined.

So as @sa-jid already said, you will have to pass down that userId to your Albums component.

Answer 2

your API call https://jsonplaceholder.typicode.com/albums?userId="" returns an empty array that is why no data is displayed on Album component , try passing userid as query param to your useGetAlbumsQuery(userId) like this.

You also need to pass the selected userId to your Album.js after pressing album button.

your Users.js may look like

import React, {useState} from 'react'
import { useGetAlbumsQuery, useGetUsersQuery } from './redux'
import Albums from './Albums'

const User = () => {
    const {data: users, isLoading, isError} = useGetUsersQuery()
    const [userId, setUserId] = useState()
    useGetAlbumsQuery(userId)

    return (
        <>
            {isLoading && <h1>Loading...</h1>}
            {isError && <h1>Something has gone wrong</h1>}
                <ul>
                    {
                        users?.map(el => (
                            <li key={el.id}>
                                <p>{el.name}</p> 
                                <div>
                                    <button onClick={(e)=> setUserId(e.target.id)} id={el.id}>Albums</button>
                                    <button>Posts</button>
                                </div>
                            </li>
                        ))  
                    }
                </ul>
                <Albums userId={userId} />
        </>
    )
}
export default User

and your Album.js is

import {useGetAlbumsQuery, useGetUsersQuery} from './redux'

const Albums = ({userId}) => {
    const {data, isSuccess} = useGetAlbumsQuery(userId)
 
    return (
        <>
            <h3>hello</h3>
                {isSuccess && data?.map(el => {
                 <p key={el.id}>{el.title}</p>
             })}
        </>
    ) 
}
export default Albums

I hope this will help.