CODEWITHSUNDEEP
javascriptreactjsredux-toolkitrtk-query
Aidan Walker
Aidan Walker

Reputation: 3

react redux - useLoginMutation is not a function or its return value is not iterable

Im not sure what the error means whilst trying to import a mutation slice into my LoginScreen using redux-toolkit. "useLoginMutation is not a function or its return value is not iterable."

usersApiSlice.js:

import { apiSlice } from "./apiSlice";

export const userApiSlice = apiSlice.injectEndpoints({
  endpoints: (builder) => ({
    login: builder.mutation({
      query: (data) => ({
        url: "/lognin",
        method: "POST",
        body: data,
      }),
    }),
  }),
});

export const { useLoginMutation } = userApiSlice;

apiSlice:

 // base api slice
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query";
import { BASE_URL } from "../constants";

const baseQuery = fetchBaseQuery({
  baseUrl: BASE_URL,
});

async function baseQueryWithAuth(args, api, extra) {
  const result = await baseQuery(args, api, extra);
  return result;
}

export const apiSlice = createApi({
  baseQuery: baseQueryWithAuth, // Use the customized baseQuery
  tagTypes: ["Product", "Order", "User"],
  endpoints: (builder) => ({}),
});

LoginScreen:

import { useLoginMutation } from "../slices/usersApiSlice";

const LoginScreen = () => {
  const [login, { isLoading }] = useLoginMutation();

  return <h1>Sign In</h1>
};

export default LoginScreen;

I've tried removing the export from userApiSlice, I assume its something to do with the imports/exports its complaining about

Upvotes: 0

Views: 435

Answers (1)

phry
phry

Reputation: 44276

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query";

should be

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

otherwise you won't get React hooks.

Upvotes: 2

Related Questions