Ошибка импорта хука из RTK-Query?

Question

[Danila232]

// createApi.jsx
export const api = createApi({
reducerPath: 'api',
baseQuery: fetchBaseQuery({baseUrl: 'http://localhost:3000'}),
tagTypes: ['products'],

endpoints: builder => ({
    getPageDataCards: builder.query({   
        query: () => '/cards',
        providesTags: ['products'],
    }),
})

export const {
useGetPageDataCardsQuery,
} = api

// configureStore.jsx
import { configureStore } from "@reduxjs/toolkit";
import reducer from "./mainSlice";
import { api } from "./createApi";

export const store = configureStore({
    reducer: {
      reducer,
      [api.reducerPath]: api.reducer,
    },
    middleware: (getDefaultMiddleware) => getDefaultMiddleware()
})

// Cards.jsx
import { useGetPageDataCardsQuery } from '../../store/createApi';
export const Cards = () => {
    const {
        data: cards = [],
        isFetching
     } = useGetPageDataCardsQuery()
})

Почему ошибка (0 , store_createApi__WEBPACK_IMPORTED_MODULE_2_.useGetPageDataCards) is not a function ?
Пути все правильные, абсолютно точно

Comments

[Алексей Уколов]

Судя по комментарию, файл у вас называется api.jsx, а импортируете вы из createApi.
Но в таком случае ошибка была бы другой - что не получается найти файл.

[Danila232]

Алексей Уколов, ошибся, подредачил вопрос. Файл называется createApi.jsx, пути правильные там

[Антон Иванов]

export const Cards = () => {
    const {
        data: cards = [],
        isFetching
     } = useGetPageDataCardsQuery()
}) <! -- Вот эта скобка тут явно лишняя

[Danila232]

Антон Иванов, опечатался когда вопрос делал, в реальном коде с синтаксисом всё норм

Answer 1

[Elaryks]

В приложенном коде createApi.jsx не видно импортов, но предположу, что дело в них:

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

Обратите внимание на /react в конце импорта.

Comments

[Danila232]

Огромное спасибо! 2 часа сидел, не мог понять в чём дело, спасибо VS-Code за авто-импорт..
Чекнул доки - так и не понял, зачем они там две ссылки оставили, одну с "/react", другую - без:


/* React-specific entry point that automatically generates
hooks corresponding to the defined endpoints */

не особо понял что они имеют в виду, не подскажете? Типо если используешь RTK hook-и(например useGetPageDataCardsQuery) - то надо /react дописывать?

[Elaryks]

Danila232, да, импорт с /react на конце предназначен для использования с React и позволяет RTK Query автоматически генерировать хуки на основе эндпоинтов.