rising-crimson
rising-crimsonβ€’15mo 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
kapa.aiβ€’15mo 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
kapa.aiβ€’15mo 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
kapa.aiβ€’15mo ago
<@246421183484919808> kapa.ai is still learning and improving, please let us how it did by reacting below
correct-apricot
correct-apricotβ€’15mo 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.
rising-crimson
rising-crimsonβ€’15mo ago
Um yes, but I didn't create this getUserIdentity, and it is not on the /app folder
correct-apricot
correct-apricotβ€’15mo ago
if you are using header or layout from refine, we are using useGetIdentity to render user on header
rising-crimson
rising-crimsonβ€’15mo 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(),
};
correct-apricot
correct-apricotβ€’15mo ago
getCookieIdentity returns undefined, just return null instead
rising-crimson
rising-crimsonβ€’15mo ago
ah good!
correct-apricot
correct-apricotβ€’15mo ago
πŸš€
rising-crimson
rising-crimsonβ€’15mo ago
Awesome, that was it! Thanks for the quick reply! πŸ’―