TypeError: Object(...) is not a function in react

Question

src/Service/Post.js

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/dist/query"
    
    export const postAPi=createApi({
        reducerPath:'postApi',
        baseQuery:fetchBaseQuery({
            baseUrl:"https://jsonplaceholder.typicode.com/",
        }),
        endpoints:(builder)=>({
            getAllPost:builder.query({
                query:()=>({
                    url:'posts',
                    method:'GET'
                })
            })
        })
    })
    export const { useGetAllPostQuery }=postAPi

src/App.js

import { useGetAllPostQuery } from './Service/Post'

export default function App() {
  const data=useGetAllPostQuery()
  return (
    <div>
        <h1>
          React App
        </h1>
    </div>
  )
}

I fetch data using RTK query so,when I try to access useGetAllPostQuery in my app.js react component then it saw me error in browser TypeError: Object(...) is not a function so, anyone can suggest how to solve this error

phry · Accepted Answer · 2021-10-11 10:34:03Z

5

You are not importing the query/react endpoint. The normal query endpoint does not create hooks.

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

answered Oct 11, 2021 at 10:34

phry

44.9k7 gold badges96 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

praful Over a year ago

thank you sir , I import wrong , now it's working

Harshad Prajapati Over a year ago

I used VS code auto import and it's imported from

phry Over a year ago

@HarshadPrajapati importing from @reduxjs/toolkit/query is perfectly fine if you do not use React and do not want the hooks. If you use React, you need to use @reduxjs/toolkit/query/react. Only you as a human can decide that, your auto-import cannot make that decision.

goodhyun · Accepted Answer · 2022-01-13 12:23:21Z

0

A typo can cause the error too. Be careful of the auto-generated hooks.

export const { use_____Query } = ~~APi

answered Jan 13, 2022 at 12:23

goodhyun

5,0083 gold badges35 silver badges25 bronze badges

Collectives™ on Stack Overflow

TypeError: Object(...) is not a function in react

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related