RTK Query, just get stuck on subscriptions/internal_probeSubscription

[Asinox]

Hello there! I'm refactoring a small app (React Native), from Ducks to Redux Toolkit, and I really love RTK, less code, more efficiency.

I started with a small piece of code to retrieve some records from a external api resource, and some auth process withe Firebase, my Firebase Auth process works as expected, but I can't retrieve data from the external API, here is my chunck of code:

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

const API_KEY = '....';

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({
    baseUrl: 'https://api.themoviedb.org',
  }),
  tagTypes: ['movies'],
  refetchOnFocus: true,
  refetchOnReconnect: true,
  endpoints: builder => ({
    getMovieByTitle: builder.query({
      query: (page = 1, title) =>
        `/3/search/movie/?query=${title}&page=${page}&api_key=${API_KEY}&include_adult=false`,
      providesTags: ['movies'],
    }),
  }),
});

export const {useGetMovieByTitleQuery} = api;

Here the debug, cero records, just got stuck on subscriptions/internal_probeSubscription, please what;s Im missing here?:

[phryneas]

You probably forgot to add the middleware to the store, what does your configureStore call look like?

[Asinox]

@phryneas here the store configuration

import {configureStore} from '@reduxjs/toolkit';
import {persistStore, persistReducer} from 'redux-persist';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {rootReducer} from './reducers';
import thunk from 'redux-thunk';
import {setupListeners} from '@reduxjs/toolkit/query';
import logger from 'redux-logger';
import {api} from '../features/api/apiSlice';

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
  whitelist: ['user', 'movie', 'movies', 'likes'],
  blacklist: [],
  timeout: null,
};

//const createDebugger = require('redux-flipper').default;
const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  immutableCheck: false,
  middleware: getDefaultMiddleware =>
    __DEV__
      ? getDefaultMiddleware({
          serializableCheck: false,
          immutableCheck: false,
        }).concat(/*createDebugger(),*/ thunk, logger, api.middleware)
      : getDefaultMiddleware({
          serializableCheck: false,
          immutableCheck: false,
          thunk,
          logger,
        }),
});

setupListeners(store.dispatch);

export const persistor = persistStore(store);

Reducer:

import {combineReducers} from 'redux';
import {api} from '../features/api/apiSlice';

const appReducer = combineReducers({
  [api.reducerPath]: api.reducer,
});

const rootReducer = (state, action) => {
  if (action.type === 'user/userLogout/fulfilled') {
    state = undefined;
  }
  return appReducer(state, action);
};

export {rootReducer};

[phryneas]

You do not add the api in production builds. And if you add it in prod builds, that DEV check does nothing (apart from dreaming up the nonexistant options "logger".

Use this:

middleware: getDefaultMiddleware => getDefaultMiddleware({
          serializableCheck: false,
          immutableCheck: false,
        }).concat(logger, api.middleware)

(thunk is already a default middleware, don't add it manually)