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

export const api = createApi({
    reducerPath: 'api', // Унікальний ключ в Redux state
    baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
    endpoints: (builder) => ({
        // ... endpoints
    }),
})

/* Custom Base Query з Axios */
const axiosBaseQuery =
    ({ baseUrl } = { baseUrl: '' }) =>
    async ({ url, method, data, params }) => {
        try {
            const result = await axios({ url: baseUrl + url, method, data, params })
            return { data: result.data }
        } catch (axiosError) {
            let err = axiosError
            return {
                error: {
                    status: err.response?.status,
                    data: err.response?.data || err.message,
                },
            }
        }
    }

getPost: builder.query({
    query: (id) => `post/${id}`,
    // Опції...
})

const { data } = useGetPostQuery(id, { skip: !id })

const { data } = useGetRatesQuery(undefined, {
    pollingInterval: 3000, // Кожні 3 секунди
})

import { z } from 'zod';

const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
});

getUsers: builder.query({
  query: () => 'users',
  transformResponse: (response) => {
    // Валідація! Якщо не пройде, випаде помилка
    const parsed = z.array(UserSchema).parse(response);

    // Трансформація: додаємо computed fields
    return parsed.map(user => ({
        ...user,
        displayName: user.name.toUpperCase()
    }));
  },
}),

updatePost: builder.mutation({
    query: ({ id, ...patch }) => ({
        url: `post/${id}`,
        method: 'PATCH',
        body: patch,
    }),
})

const [updatePost, { isLoading }] = useUpdatePostMutation()

const handleSave = async () => {
    try {
        await updatePost({ id: 1, title: 'New' }).unwrap()
        // unwrap() дозволяє ловити помилки через try/catch
    } catch (err) {
        console.error(err)
    }
}

getPosts: builder.query({
  query: () => 'posts',
  providesTags: ['Post'],
}),
addPost: builder.mutation({
  query: (body) => ({ url: 'posts', method: 'POST', body }),
  invalidatesTags: ['Post'],
})

getPosts: builder.query({
  query: () => 'posts',
  // Повертає масив тегів:
  // [ { type: 'Post', id: 1 }, { type: 'Post', id: 2 }, ..., { type: 'Post', id: 'LIST' } ]
  providesTags: (result) =>
    result
      ? [
          ...result.map(({ id }) => ({ type: 'Post', id })),
          { type: 'Post', id: 'LIST' },
        ]
      : [{ type: 'Post', id: 'LIST' }],
}),

getPost: builder.query({
  query: (id) => `posts/${id}`,
  providesTags: (result, error, id) => [{ type: 'Post', id }],
}),

// Оновлення одного поста
updatePost: builder.mutation({
  query: ({ id, ...patch }) => ...,
  // Інвалідує ТІЛЬКИ цей пост. Список НЕ буде перечитано (якщо він не 'provides' цей конкретний ID)
  // АЛЕ, оскільки наш список (вище) 'provides' всі ID, то і список оновиться.
  // Це правильна поведінка, бо title міг змінитися і в списку.
  invalidatesTags: (result, error, { id }) => [{ type: 'Post', id }],
}),

// Додавання нового поста
addPost: builder.mutation({
  query: (body) => ...,
  // Інвалідує "LIST". Це змусить getPosts перечитатися повністю.
  invalidatesTags: [{ type: 'Post', id: 'LIST' }],
}),

likePost: builder.mutation({
  query: (id) => ({
    url: `posts/${id}/like`,
    method: 'POST',
  }),
  // lifecycle hook mutations
  async onQueryStarted(id, { dispatch, queryFulfilled }) {
    // 1. Оптимістично оновлюємо кеш `getPost(id)`
    const patchResult = dispatch(
      api.util.updateQueryData('getPost', id, (draft) => {
        // draft — це Immer draft. Можемо мутувати!
        draft.likes += 1;
        draft.likedByUser = true;
      })
    )

    // 2. Також оновлюємо `getPosts` (список), якщо треба
    const listPatchResult = dispatch(
        api.util.updateQueryData('getPosts', undefined, (draft) => {
             const post = draft.find(p => p.id === id);
             if (post) {
                 post.likes += 1;
                 post.likedByUser = true;
             }
        })
    );

    try {
      // 3. Чекаємо реальної відповіді сервера
      await queryFulfilled
    } catch {
      // 4. ПОМИЛКА! Відкатуємо зміни
      patchResult.undo();
      listPatchResult.undo();

      // Можна показати тост
      toast.error("Не вдалося лайкнути. перевірте інтернет.");
    }
  },
}),

getMessages: builder.query({
  query: (channelId) => `channels/${channelId}/messages`,

  async onCacheEntryAdded(
    channelId,
    { updateCachedData, cacheDataLoaded, cacheEntryRemoved }
  ) {
    // 1. Створюємо сокет
    const ws = new WebSocket('ws://localhost:8080');

    try {
      // 2. Чекаємо поки початкові дані завантажаться
      await cacheDataLoaded;

      // 3. Слухаємо події
      const listener = (event) => {
        const data = JSON.parse(event.data);
        if (data.channelId !== channelId) return;

        // 4. Оновлюємо кеш "на льоту"
        updateCachedData((draft) => {
          draft.push(data.message);
        });
      };

      ws.addEventListener('message', listener);
    } catch {
      // no-op handle errors
    }

    // 5. Cleanup при unmount (коли кеш видаляється)
    await cacheEntryRemoved;
    ws.close();
  },
}),

/* src/api/baseApi.js */
// Порожній API об'єкт
export const baseApi = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: () => ({}), // Порожньо!
});

/* src/features/users/usersApi.js */
import { baseApi } from '../../api/baseApi';

// Розширюємо baseApi
export const usersApi = baseApi.injectEndpoints({
  endpoints: (builder) => ({
    getUsers: builder.query({ ... }),
    updateUser: builder.mutation({ ... }),
  }),
  overrideExisting: false,
});

export const { useGetUsersQuery } = usersApi;

import { fetchBaseQuery } from '@reduxjs/toolkit/query'
import { tokenReceived, loggedOut } from './authSlice'

const baseQuery = fetchBaseQuery({
    baseUrl: '/api',
    prepareHeaders: (headers, { getState }) => {
        const token = getState().auth.token
        if (token) {
            headers.set('authorization', `Bearer ${token}`)
        }
        return headers
    },
})

const baseQueryWithReauth = async (args, api, extraOptions) => {
    // 1. Спробуємо виконати запит
    let result = await baseQuery(args, api, extraOptions)

    // 2. Якщо 401 Unauthorized
    if (result.error && result.error.status === 401) {
        // 3. Спробуємо оновити токен
        const refreshResult = await baseQuery('/refresh', api, extraOptions)

        if (refreshResult.data) {
            // 4. Збережемо новий токен
            api.dispatch(tokenReceived(refreshResult.data))

            // 5. Повторимо початковий запит
            result = await baseQuery(args, api, extraOptions)
        } else {
            // 6. Якщо refresh не вдався - logout
            api.dispatch(loggedOut())
        }
    }

    return result
}

export const api = createApi({
    baseQuery: baseQueryWithReauth, // Використовуємо наш wrapper
    endpoints: () => ({}),
})

import { isRejectedWithValue } from '@reduxjs/toolkit';

export const rtkQueryErrorLogger = (api) => (next) => (action) => {
  // RTK Query dispatch-ить спец. екшени при помилках
  if (isRejectedWithValue(action)) {
    console.warn('Ми зловили помилку RTK Query!');

    if (action.payload.status === 500) {
        toast.error('Сервер впав. Спробуйте пізніше.');
    }
  }

  return next(action);
};

// В store.js
middleware: (gDM) => gDM().concat(api.middleware, rtkQueryErrorLogger),

const api = createApi({
    baseQuery: fetchBaseQuery({ baseUrl: '/' }),
    endpoints: (builder) => ({
        getData: builder.query<
            ResultType, // Успішна відповідь
            ArgType // Аргумент (id etc)
        >({
            query: (arg) => `data/${arg}`,
        }),
    }),
})

const baseQuery = fetchBaseQuery({ baseUrl: '/' })

const customBaseQuery: BaseQueryFn<
    string | FetchArgs, // args
    unknown, // result
    { message: string; code: number } // FetchBaseQueryError | CustomError
> = async (args, api, extraOptions) => {
    let result = await baseQuery(args, api, extraOptions)
    return result
}

/* setupTests.js */
import { setupServer } from 'msw/node'
import { rest } from 'msw'

export const handlers = [
    rest.get('/api/user', (req, res, ctx) => {
        return res(ctx.json({ name: 'John Doe' }))
    }),
]

export const server = setupServer(...handlers)

/* User.test.js */
import { renderHook, waitFor } from '@testing-library/react'
import { Provider } from 'react-redux'
import { useGetUserQuery } from './api'
import { store } from './store' // реальний стор з API

function Wrapper({ children }) {
    return <Provider store={store}>{children}</Provider>
}

test('returns user data', async () => {
    const { result } = renderHook(() => useGetUserQuery(), { wrapper: Wrapper })

    // Спочатку loading
    expect(result.current.isLoading).toBe(true)

    // Чекаємо успіху
    await waitFor(() => expect(result.current.isSuccess).toBe(true))

    expect(result.current.data).toEqual({ name: 'John Doe' })
})

import { createWrapper } from 'next-redux-wrapper'
import { api } from './api'

// Спеціальний reducer для гідрації
const rootReducer = (state, action) => {
    if (action.type === HYDRATE) {
        return { ...state, ...action.payload }
    }
    return combinedReducer(state, action)
}

export const wrapper = createWrapper(makeStore)

// В getServerSideProps
export const getServerSideProps = wrapper.getServerSideProps((store) => async (context) => {
    // 1. Dispatch запит
    store.dispatch(api.endpoints.getPosts.initiate())

    // 2. Чекаємо завершення ВСІХ запитів
    await Promise.all(store.dispatch(api.util.getRunningQueriesThunk()))

    return { props: {} }
})

export const api = createApi({
    baseQuery: fetchBaseQuery({ baseUrl: '/' }),
    extractRehydrationInfo(action, { reducerPath }) {
        if (action.type === HYDRATE) {
            return action.payload[reducerPath]
        }
    },
    endpoints: () => ({}),
})

/* api.js */
getInfinitePosts: builder.query({
  query: (page) => `posts?page=${page}`,
  // Ця функція дозволяє мержити нові дані з існуючим кешем!
  serializeQueryArgs: ({ endpointName }) => {
    return endpointName; // Ігноруємо аргумент 'page' в ключі кешу
  },
  merge: (currentCache, newItems) => {
    currentCache.push(...newItems);
  },
  // Змушуємо refetch, коли змінюється сторінка (навіть якщо ключ той самий)
  forceRefetch({ currentArg, previousArg }) {
    return currentArg !== previousArg;
  },
}),

function Feed() {
    const [page, setPage] = useState(1)
    const { data: posts, isFetching } = useGetInfinitePostsQuery(page)

    return (
        <div>
            {posts.map((post) => (
                <Post key={post.id} data={post} />
            ))}
            <button onClick={() => setPage(page + 1)} disabled={isFetching}>
                Load More
            </button>
        </div>
    )
}

// thunks.js
export const fetchUser = createAsyncThunk('user/fetch', async (id) => {
    const res = await fetch(`/users/${id}`)
    return res.json()
})

// slice.js
extraReducers: (builder) => {
    builder.addCase(fetchUser.fulfilled, (state, action) => {
        state.user = action.payload
    })
}

// api.js
getUser: builder.query({
    query: (id) => `users/${id}`,
})

// component.js
const { data: user } = useGetUserQuery(id)

const { data: user } = useGetUserQuery(id)
const { data: posts } = useGetPostsQuery(user?.id, {
    skip: !user, // Чекаємо поки user завантажиться
})

const { data } = useGetPostsQuery()
const [localPosts, setLocalPosts] = useState([])

useEffect(() => {
    if (data) setLocalPosts(data)
}, [data])

const { data } = useGetPostsQuery();
return <div>{data.map(...)}</div>; // Crash! data is undefined initially

fetchBaseQuery({
    baseUrl: '/api',
    // Перехоплюємо відповідь
    responseHandler: async (response) => {
        const text = await response.text()
        const json = text.length ? JSON.parse(text) : {}

        if (json.status === 'error') {
            // Викидаємо помилку, щоб RTK Query перевів запит в rejected
            throw { status: 500, data: json }
        }

        return json
    },
})

endpoints: (builder) => ({
    getUsers: builder.query({
        query: () => 'users',
        // Трансформуємо помилку в зручний формат
        transformErrorResponse: (response, meta, arg) => {
            return {
                message: response.data?.message || 'Unknown Error',
                code: response.status
            };
        },
    }),
}),

export const useActiveUsers = () => {
    const { data } = useGetUsersQuery()
    // Селектор-логіка
    return useMemo(() => data?.filter((u) => u.isActive) ?? [], [data])
}

import { usePrefetch } from './api'

function UserList({ users }) {
    const prefetchUser = usePrefetch('getUser')

    return (
        <div>
            {users.map((user) => (
                <Link key={user.id} to={`/users/${user.id}`} onMouseEnter={() => prefetchUser(user.id)}>
                    {user.name}
                </Link>
            ))}
        </div>
    )
}

/* Prefecthing in Route component */
function UserPage({ id }) {
    useGetUserQuery(id); // Завантажуємо User
    usePrefetch('getUserPosts')(id); // Паралельно починаємо вантажити пости!

    return ...
}