RTK query function is undefined in react native-CodePudding

I'm using RTK query to fetch data from the endpoint, setup the folder structure like this

src (root)

features/api/apiSlice.js
screens/ChatScreen.js

I have setup apiSlice.js like this

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

export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({baseUrl: 'https://api.covid19api.com'}),
  endpoints: builder => ({
    getEmojiPoints: builder.query({
      query: () => '/countries',
    }),
  }),
});

export const {useGetEmojiPoints} = apiSlice;

then imported the useGetEmojiPoints hook in functional component like this

import {useGetEmojiPoints} from '../features/api/apiSlice';

  const {
    data: emojiPoints,
    isLoading,
    isSuccess,
    isError,
    error,
  } = useGetEmojiPoints(); // getting this undefined (not a function)

Setup App.js like this

import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  useColorScheme,
  Text,
  StyleSheet,
} from 'react-native';
import ChartScreen from './src/screens/ChartScreen';
import {ApiProvider} from '@reduxjs/toolkit/query/react';
import {apiSlice} from './src/features/api/apiSlice';

const AppWrapper = () => {
  return (
    <ApiProvider api={apiSlice}>
      <App />
    </ApiProvider>
  );
};

const App = () => {
  const isDarkMode = useColorScheme() === 'dark';

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <ScrollView>
        <ChartScreen />
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {flex: 1, backgroundColor: '#fff'},
});

export default AppWrapper;

Whats wrong why its giving me undefined for query hook?

CodePudding user response：

It's useGetEmojiPointsQuery, not useGetEmojiPoints.