user101289's questions

Entendo que o RTK Query representa uma mudança de pensamento em relação ao gerenciamento de estado/armazenamento do Redux, e o paradigma geral é que você usa o endpoint do RTK Query sempre que precisa de dados e confia nele para gerenciar o cache e o estado em vez de slices/thunks etc.

No entanto, tenho um endpoint (definido como um endpoint de consulta RTK) que extrai dados de tensão de um dispositivo em um sistema de hardware. Quero saber essa tensão em um dado momento, mas também quero manter um histórico para poder desenhar um gráfico mostrando a flutuação da tensão.

Minha ideia é que eu possa interceptar os resultados da consulta na fatia da API de Consulta RTK e usar uma ação de redutor normal para inserir os dados no repositório. No entanto, como a consulta RTK não é um componente, não posso usar um gancho de redutor nela. Ainda acho que deve haver uma maneira da fatia da API de Consulta RTK interagir diretamente com o repositório, mas não encontrei nenhuma documentação sobre isso.

A segunda opção que pensei foi usar um middleware para interceptar a ação de consulta, fazer o que for necessário com os dados e armazená-los. No entanto, os exemplos de middleware que encontrei estão todos relacionados ao uso de ações de fatiamento tradicionais do Redux Toolkit, não de endpoints de consulta RTK, então isso gera erros:

listenerMiddleware.startListening({
    actionCreator: useGetVoltageQuery, /// <-- this is an endpoint in RTK Query API slice, not a slice action
    effect: async (action, listenerApi) => {
        // Run whatever additional side-effect-y logic you want here
        console.log('GOT HERE')

        // Can cancel other running instances
        listenerApi.cancelActiveListeners()

        // Run async logic
        /*const data = await fetchData()

        // Pause until action dispatched or state changed
        if (await listenerApi.condition(matchSomeAction)) {
            // Use the listener API methods to dispatch, get state,
            // unsubscribe the listener, start child tasks, and more
            listenerApi.dispatch(updateVoltage(listenerApi.))
        }*/
    },
})

Existe uma maneira recomendada de manipular dados da consulta RTK e persisti-los no armazenamento, bem como manipular os resultados da consulta no cache RTK normal?

Eu uso redux toolkithá alguns anos e estou bem familiarizado com ele. Estou passando e tentando atualizar o código antigo usando a RTK Queryestratégia mais nova para substituir alguns dos meus antigos slicese thunks.

Se entendi a documentação corretamente, parece que o RTK Query foi criado para substituir amplamente a maneira antiga de fazer as coisas e, em vez de manter o estado "manualmente" em seus slices, você deixa o RTK Query cuidar do gerenciamento/armazenamento em cache e apenas solicita novamente os dados do slice da API que foi definido pelo RTK Query, e ele faz o resto automaticamente.

Supondo que isso esteja correto, como você seleciona dados que foram adicionados ao cache por uma mutação?

Especificamente, estou usando uma mutação para autenticar um usuário (este é o cenário de teste mais simples, então não há realmente nenhuma autenticação, nenhum token, etc.)

Parece que:

    loginUser: builder.mutation<UserServiceResult, UserCredentials>({
        query: ({ userName, password }) => ({
            url: '/authenticate',
            method: 'POST',
            body: { UserName: userName, Password: password },
        }),
    }),

No formulário de login, isso é usado assim:

    const [loginUser, { isLoading: isUpdating }] = useLoginUserMutation();
    loginUser(credentials).unwrap().then((userServiceResult) => {
        if (userServiceResult.isSuccessful) {
            console.log("Successfully logged in", userServiceResult);
            toast.success("User authenticated.", {position: "top-right"});
        } else {
            toast.error("User authentication failed.", {position: "top-right"});
        }
    })

Tudo isso está funcionando bem. Mas o layout principal está usando um seletor redux para verificar se o usuário existe na loja para mostrar o menu "logado" vs. o menu "convidado". Parece com isso:

const user = useAppSelector(selectUser); // then do stuff if user is not null

Qual é a estratégia para manter os dados contidos nas mutações da API?

Estou construindo uma API com laravel e tentando fazer as migrações funcionarem. No entanto, esta migração falha comMethod Illuminate\Database\Schema\Blueprint::cascadeOnDelete does not exist.

public function up(): void
{
    Schema::create('stuff', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('image');
        $table->timestamps();

        $table->cascadeOnDelete();
    });
}

Meu aplicativo é o laravel 10, mas esse recurso está na documentação do laravel 10 e 11. Como é que esse método não existe?

Estou usando o pacote inicial Laravel brisa-next nextjs para criar um aplicativo nextjs com um back-end desenvolvido por laravel e protegido por sanctum.

Laravel espera um valor de cabeçalho CSRF e um cookie de sessão. Não estou tendo problemas para definir esses valores nos componentes do cliente e recuperar dados do laravel usando algo assim:

async function fetchData(url: string): Promise<Response> {
    let fetch_path = process.env.NEXT_PUBLIC_BACKEND_URL + '/api/' + url
    console.log('fetch data called')

    const options: RequestInit = {
        method: "GET",
        credentials: "include",
        headers: {
            "Accept": "application/json",
            "Referer": process.env.APP_URL,
            "X-Requested-With": "XMLHttpRequest",
            "Content-Type": "application/json",
        }
    };

    return await fetch(fetch_path, options);
}

Quando tento fazer uma solicitação de API em um componente do servidor fazendo algo semelhante, ele falha sempre com um 401:

async function fetchDataServerSide(url: string) {
    'use server'
    let fetch_path = process.env.NEXT_PUBLIC_BACKEND_URL + '/api/' + url

    const options: RequestInit = {
        method: "GET",
        headers: {
            "Accept": "application/json",
            "Referer": process.env.APP_URL,
            "X-Requested-With": "XMLHttpRequest",
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": cookies().get('XSRF-TOKEN'),
        }
    };

    return await fetch(fetch_path, options);
}

Observe que isso é basicamente exatamente o que estou fazendo com as mesmas chamadas via Postman, e elas funcionam conforme o esperado.

Alguém pode apontar o que estou fazendo de errado?