get the data use auth and async wait

[yaser55v]

Sorry if I was asking this question, but really for over a month now I've been stuck in this problem and need a little help.
I have asynchronous data that needs to be authenticated, this is data, not the login system.
This is the code and I don't know where the problem is?
Now I need tow fetch this api.
Sorry again for this kind of question, and thanks for the help.

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

export const pointsApi = createApi({
  reducerPath: "points",
  baseQuery: fetchBaseQuery({
    baseUrl: process.env.BASE_URL,
    prepareHeaders: (headers, { getState }) => {
      const token = getState().authSlice.userToken
      if (token) {
        headers.set("authorization", `Bearer ${token}`)
      }
      return headers
    },
  }),

  endpoints: build => ({
    getPoints: build.query({
      async queryFn(_arg, _queryApi, _extraOptions, fetchWithBQ) {
        const pointUser = await fetchWithBQ("/url/api")
        if (pointUser.error) throw pointUser.error
        const points = pointUser.data
        return points
      },
    }),
  }),
})

export const { useGetPointsQuery } = pointsApi


//================================================ =========

import { createSlice } from "@reduxjs/toolkit"

const authSlice = createSlice({
  name: "auth",
  initialState: {
    token: null,
  },
  reducers: {
    setToken: (state, userToken) => {
      state.token = userToken
    },
  },
})

export const { setToken } = authSlice.actions
export default authSlice.reducer

//================================================ =========

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

//================================================ =========

const TestQuery = () => {
  const dispatch = useDispatch()
  const { getTokenSilently } = useAuth0()
  const { data } = useGetPointsQuery()

  useEffect(() => {
    getTokenSilently().then(token => {
      dispatch(setToken(token))
    })
    // eslint-disable-next-line
  }, [])

  return (
    <div>
      
    </div>
  )
}

export default TestQuery 

[markerikson]

Sorry, I'm afraid it's really not clear what you're asking :(

• What are you _trying to do?
• What should happen?
• What is "wrong"? What behavior are you seeing instead of the expected behavior?

[yaser55v]

I need to fetch this api but i got error: "TypeError: Failed to fetch"
Access to fetch at ... from origin '.....' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

[markerikson]

Ah. This is a CORS error, and doesn't have anything to do with Redux or RTK by itself. This needs to be addressed by having your server configured to accept these requests.

Please see these resources for details:

• https://medium.com/@baphemot/understanding-cors-18ad6b478e2b
• https://auth0.com/blog/cors-tutorial-a-guide-to-cross-origin-resource-sharing/
• https://jakearchibald.com/2021/cors/

[yaser55v]

Thank you, but not that, I know that there is no problem in Redux, but the problem is that there is an error in the code and I do not know where it is. When I fetch data in this way, there is no problem, but because I have a lot of data I cannot use this method .

const [userPoint, setUserPoint] = useState([])
const [refreshData, setRefreshData] = useState(false)
const [isLoaded, setIsLoaded] = useState(false)
  const fetchUserPoints = async () => {
    const token = await getTokenSilently()
    const response = await fetch(process.env.API_POINTS, {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    })
    const data = await response.json()
    setUserPoint(data)
    setIsLoaded(true)
  }

  useEffect(() => {
    fetchUserPoints()
  }, [refreshData])