Firebase Rtk query slice

    0

    0

    YusifHasanov

    Toattach a Selector to an endpoint, use the attachEndpoint method on the Selector class. This method takes an instance of the FireStore interface and an observable selection function. The selection function pulls the data from the endpoint and emits it as an observable to the selector.

    The selectAllTodos selector will emit the data from all of the selected todos in the FireStore.

    The selectTodoById selector will emit the data from the todo with the given id.

    Library: react

    import { createEntityAdapter, createSelector} from "@reduxjs/toolkit";
    import {apiSlice} from "../../api/apiSlice";
    import {FireStore} from "../../Firestore";
    
    const todoAdapter = createEntityAdapter({
        selectId: todo => todo.id,
        sortComparer: (a, b) => a.id.localeCompare(b.id)
    });
    
    const initialState = todoAdapter.getInitialState();
    
    export const extendedTodoSlice = apiSlice.injectEndpoints({
    
        endpoints: builder => ({
            getTodos: builder.query({
                async queryFn() {
                    return FireStore.get("Todos");
                },
                transformResponse: response => {
                    return todoAdapter.setAll(initialState, response)
                },
                providesTags: (result, error, arg) => [{type: 'Todo', id: 'LIST'}]
    
            }),
            addTodo: builder.mutation({
                async queryFn(data) {
                    const response = FireStore.add("Todos", data);
                    return response
                },
                transformResponse:response=>{
                    return todoAdapter.addOne(initialState, response)
                },
                invalidatesTags: (result, error, todo) => [{type: 'Todo', id: 'LIST'}]
            }),
            updateTodo: builder.mutation({
                async queryFn(data) {
                    const response = FireStore.update("Todos", data);
                    return response
                },
                transformResponse:response=> {
                    return todoAdapter.updateOne(initialState, response)
                },
                invalidatesTags: (result, error, todo) => [{type: 'Todo', id: 'LIST'}]
            }),
            deleteTodo: builder.mutation({
                async queryFn(id) {
                    const response = FireStore.delete("Todos", id);
                    return response
                },
                transformResponse:response=>{
                    return todoAdapter.removeOne(initialState, response)
                },
                invalidatesTags: (result, error, id) => [{type: 'Todo', id: 'LIST'}]
            }),
        })
    })
    
      export const {
        useGetTodosQuery,
        useAddTodoMutation,
        useUpdateTodoMutation,
        useDeleteTodoMutation} = extendedTodoSlice;
    
    export const selectTodosResult = extendedTodoSlice.endpoints.getTodos.select();
    
    const selectTodosData = createSelector(
        selectTodosResult,
        result => result.data
    )
    
    
    export const {selectAll: selectAllTodos, selectById: selectTodoById} = todoAdapter.getSelectors(
        state => selectTodosData(state) ?? initialState
    );
    
    
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Playground
    • Snippets
    • Cookbooks
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.