genetic-orange•17mo ago

query data cannot be undefined

I created a new Refine app, using the Remix framework and Headless components. I tried to implement a small /logout route that doesn't exist in the template. It was a little hard because I'm not used to Remix but I did make a page that erases the user cookie on the client and redirects to the login page. But now I'm getting this message on the browser console that I can't find the source. Apparently it is coming from Tanstack Query, but I'm not using that directly.

chunk-AXEPKFYX.js:4742 Query data cannot be undefined. Please make sure to return a value other than undefined from your query function. Affected query key: ["getUserIdentity"]

chunk-AXEPKFYX.js:4742 Query data cannot be undefined. Please make sure to return a value other than undefined from your query function. Affected query key: ["getUserIdentity"]

I also searched for this key "getUserIdentity" on my code but it doesn't exist there.

11 Replies

kapa.ai•17mo ago

Hey @rhengles! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:

kapa.ai•17mo ago

---------------------- Hmm, I don't know enough to give you a confident answer yet. However, I can provide you with some helpful documentation on Refine and Remix: 1. Refine with Remix: Refine Remix Documentation (https://refine.dev/docs/packages/documentation/routers/remix) 2. Refine Headless: Refine Headless Documentation (https://refine.dev/docs/examples/remix/remix-headless) 3. Remix Official Documentation: Remix Documentation (https://remix.run/) These resources should help you better understand how Refine works with Remix and headless components. ----------------------

Remix | refine

refine provides router bindings and utilities for Remix. This package will provide easy integration between refine and Remix for both existing projects and new projects without giving up the benefits of Remix.

Headless | refine

refine allows you to build your SSR supported web applications using Remix. With this example, you can see how to make a simple SSR supported headless (without any style/component) CRUD App.

Remix - Build Better Websites

Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff.

kapa.ai•17mo ago

<@246421183484919808> kapa.ai is still learning and improving, please let us how it did by reacting below

fascinating-indigo•17mo ago

refine uses TanStack query under the hood. You can return null or any other object on getUserIdentity method. TanStack don't want to undefined as a result.

genetic-orange•17mo ago

Um yes, but I didn't create this getUserIdentity, and it is not on the /app folder

fascinating-indigo•17mo ago

if you are using header or layout from refine, we are using useGetIdentity to render user on header

genetic-orange•17mo ago

maybe it's something on my auth provider, I used the client side cookies example (I saw the docs page with this code but I'm not finding it right now) I modified it slightly to call my data provider to actually login I'll paste it here

import type { AuthBindings } from "@refinedev/core";
import * as cookie from "cookie";
import Cookies from "js-cookie";
import { promiseTimeout } from '@arijs/frontend/isomorphic/utils/promise'
import dataProvider from "./dataProvider";

const COOKIE_NAME = "user";

export interface UserIdentity {
    access_token: string
    admin: Record<string, any>
}

const setCookieIdentity = (user: UserIdentity) => {
    Cookies.set(COOKIE_NAME, JSON.stringify(user));
}

const getCookieIdentity = (): UserIdentity | undefined => {
    const parsedCookie = Cookies.get(COOKIE_NAME);
    return parsedCookie ? JSON.parse(parsedCookie) : undefined;
}

const removeCookieIdentity = () => {
    Cookies.remove(COOKIE_NAME);
}
// continues

import type { AuthBindings } from "@refinedev/core";
import * as cookie from "cookie";
import Cookies from "js-cookie";
import { promiseTimeout } from '@arijs/frontend/isomorphic/utils/promise'
import dataProvider from "./dataProvider";

const COOKIE_NAME = "user";

export interface UserIdentity {
    access_token: string
    admin: Record<string, any>
}

const setCookieIdentity = (user: UserIdentity) => {
    Cookies.set(COOKIE_NAME, JSON.stringify(user));
}

const getCookieIdentity = (): UserIdentity | undefined => {
    const parsedCookie = Cookies.get(COOKIE_NAME);
    return parsedCookie ? JSON.parse(parsedCookie) : undefined;
}

const removeCookieIdentity = () => {
    Cookies.remove(COOKIE_NAME);
}
// continues

export const authProvider: AuthBindings = {
    login: async ({ email: username, password, remember }) => {
        try {
            const result = await dataProvider.create({
                resource: 'auth/login',
                variables: {
                    username,
                    password,
                },
                meta: { noAuth: true },
            });
            console.warn(`authProvider login result`, result);
            const { data: { access_token, admin } } = result;
            setCookieIdentity({ access_token, admin });
            return {
                success: true,
                redirectTo: "/",
            };
        } catch (error) {
            console.warn(`authProvider login error`, error)
            return {
                success: false,
                error: error as Error,
            };
        }

    },
    logout: async () => {
        removeCookieIdentity();

        return {
            success: true,
            redirectTo: "/login",
        };
    },
    onError: async (error) => {
        console.error(error);
        return { error };
    },

export const authProvider: AuthBindings = {
    login: async ({ email: username, password, remember }) => {
        try {
            const result = await dataProvider.create({
                resource: 'auth/login',
                variables: {
                    username,
                    password,
                },
                meta: { noAuth: true },
            });
            console.warn(`authProvider login result`, result);
            const { data: { access_token, admin } } = result;
            setCookieIdentity({ access_token, admin });
            return {
                success: true,
                redirectTo: "/",
            };
        } catch (error) {
            console.warn(`authProvider login error`, error)
            return {
                success: false,
                error: error as Error,
            };
        }

    },
    logout: async () => {
        removeCookieIdentity();

        return {
            success: true,
            redirectTo: "/login",
        };
    },
    onError: async (error) => {
        console.error(error);
        return { error };
    },

    check: async (request) => {
        let user = undefined;
        if (request) {
            const hasCookie = request.headers.get("Cookie");
            if (hasCookie) {
                const parsedCookie = cookie.parse(request.headers.get("Cookie"));
                user = parsedCookie[COOKIE_NAME];
            }
        } else {
            user = getCookieIdentity();
        }

        const { pathname = undefined } = request ? new URL(request.url) : {};

        if (!user) {
            return {
                authenticated: false,
                error: new Error("Unauthenticated"),
                logout: true,
                redirectTo: `/login${pathname ? `?to=${pathname}` : ``}`,
            };
        }

        return {
            authenticated: true,
        };
    },
    getPermissions: async () => null,
    getIdentity: async () => getCookieIdentity(),
};

    check: async (request) => {
        let user = undefined;
        if (request) {
            const hasCookie = request.headers.get("Cookie");
            if (hasCookie) {
                const parsedCookie = cookie.parse(request.headers.get("Cookie"));
                user = parsedCookie[COOKIE_NAME];
            }
        } else {
            user = getCookieIdentity();
        }

        const { pathname = undefined } = request ? new URL(request.url) : {};

        if (!user) {
            return {
                authenticated: false,
                error: new Error("Unauthenticated"),
                logout: true,
                redirectTo: `/login${pathname ? `?to=${pathname}` : ``}`,
            };
        }

        return {
            authenticated: true,
        };
    },
    getPermissions: async () => null,
    getIdentity: async () => getCookieIdentity(),
};

fascinating-indigo•17mo ago

getCookieIdentity returns undefined, just return null instead

genetic-orange•17mo ago

ah good!

fascinating-indigo•17mo ago

🚀

genetic-orange•17mo ago

Awesome, that was it! Thanks for the quick reply! 💯