xenial-black•2y 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•2y 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•2y 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•2y ago

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

fair-rose•2y 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.

xenial-blackOP•2y ago

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

fair-rose•2y ago

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

xenial-blackOP•2y 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(),
};

fair-rose•2y ago

getCookieIdentity returns undefined, just return null instead

xenial-blackOP•2y ago

ah good!

fair-rose•2y ago

🚀

xenial-blackOP•2y ago

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

query data cannot be undefined

Did you find this page helpful?