Pass Resource directly to go / useGo

In the documentation for useGo / go ( https://refine.dev/docs/routing/hooks/use-go/#with-resource ) it says that you can pass a resource to the to param of go. @kapa.ai can you think of an example on getting a resource and passing it to go?
kapa.ai
kapa.ai132d ago
Hi @bastianwegge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Sure, I can provide an example based on the information extracted from the documentation. In the useGo hook, you can pass a resource object to the to parameter. This object can contain the resource name or identifier, the action, and optionally an id and meta data. The routerProvider will convert this resource object into the path defined in the resources array within the <Refine /> component. Here's an example of how you can use it:
import { useGo } from "@refinedev/core";

const MyComponent = () => {
const go = useGo();

return (
<Button
onClick={() => {
go({
to: {
resource: "posts", // resource name or identifier
action: "edit",
id: "1",
}
query: {
foo: "bar",
},
type: "push",
});
}}
>
Go Posts With Default Filters
</Button>
);
};
import { useGo } from "@refinedev/core";

const MyComponent = () => {
const go = useGo();

return (
<Button
onClick={() => {
go({
to: {
resource: "posts", // resource name or identifier
action: "edit",
id: "1",
}
query: {
foo: "bar",
},
type: "push",
});
}}
>
Go Posts With Default Filters
</Button>
);
};
In this example, when the button is clicked, it will navigate to the edit page of the post with id "1". The query parameter is used to pass additional parameters to the path. You can also pass meta properties when using useGo's go function with to as a resource object. This allows you to pass additional path parameters to the path defined in the resources array within the <Refine /> component. Here's an example:
import { useGo } from "@refinedev/core";

const MyButton = () => {
const go = useGo();

return (
<Button
onClick={() => {
go({
to: {
resource: "posts",
action: "edit",
id: "1",
meta: {
foo: "bar",
},
},
type: "push",
});
// generated path will be "/bar/posts/1/edit"
}}
>
Go Posts
</Button>
);
};
import { useGo } from "@refinedev/core";

const MyButton = () => {
const go = useGo();

return (
<Button
onClick={() => {
go({
to: {
resource: "posts",
action: "edit",
id: "1",
meta: {
foo: "bar",
},
},
type: "push",
});
// generated path will be "/bar/posts/1/edit"
}}
>
Go Posts
</Button>
);
};
In this example, the meta property is used to pass the "foo" parameter to the path. The generated path will be "/bar/posts/1/edit". Sources: - useGo Documentation (https://refine.dev/docs/routing/hooks/use-go/) - GitHub PR (https://github.com/refinedev/refine/pull/5452) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai132d ago
<@317433576721219584> kapa.ai is still learning and improving, please let us know how it did by reacting below
ratty-blush
ratty-blush132d ago
@kapa.ai The documentation says Also, you can pass a resource object to the to parameter. The routerProvider will convert the resource object to the path. So I'd like to pass a IResourceItem into the to argument. Can you think of an example on how to do that?
kapa.ai
kapa.ai132d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- Sure, you can pass an IResourceItem object to the to parameter of the go function from useGo hook. First, you need to get the resource using the useResource hook. Here's an example:
import { useGo, useResource } from "@refinedev/core";

const MyComponent = () => {
const go = useGo();
const { resource } = useResource();

return (
<Button
onClick={() => {
go({
to: resource,
type: "push",
});
}}
>
Go to Resource
</Button>
);
};
import { useGo, useResource } from "@refinedev/core";

const MyComponent = () => {
const go = useGo();
const { resource } = useResource();

return (
<Button
onClick={() => {
go({
to: resource,
type: "push",
});
}}
>
Go to Resource
</Button>
);
};
In this example, when the button is clicked, it will navigate to the path defined by the current resource. Please note that the useResource hook returns the current resource based on the route. If you want to navigate to a specific resource, you need to get that resource from the resources array returned by useResource. Sources: - useGo Documentation (https://refine.dev/docs/routing/hooks/use-go/) - useResource Documentation (https://refine.dev/docs/routing/hooks/use-resource) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai132d ago
<@317433576721219584> kapa.ai is still learning and improving, please let us know how it did by reacting below
ratty-blush
ratty-blush132d ago
@kapa.ai is there something like a LinkToResource which would make this process easier?
kapa.ai
kapa.ai132d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, there is a component called NavigateToResource that can be used to navigate to a specific resource page. This component is part of the @refinedev/remix-router, @refinedev/react-router-v6, and @refinedev/nextjs-router packages. Here's an example of how you can use it:
import { NavigateToResource } from "@refinedev/remix-router";

export default function IndexPage() {
return <NavigateToResource />;
}
import { NavigateToResource } from "@refinedev/remix-router";

export default function IndexPage() {
return <NavigateToResource />;
}
In this example, the NavigateToResource component will redirect to the first list route in the resources array if no resource is provided. You can also specify a resource and meta data:
import { NavigateToResource } from "@refinedev/remix-router";

export default function IndexPage() {
return <NavigateToResource resource="posts" meta={{ foo: "bar" }} />;
}
import { NavigateToResource } from "@refinedev/remix-router";

export default function IndexPage() {
return <NavigateToResource resource="posts" meta={{ foo: "bar" }} />;
}
In this example, the NavigateToResource component will redirect to the list route of the "posts" resource. Sources: - Remix Router Documentation (https://refine.dev/docs/routing/integrations/remix#additional-components) - React Router v6 Documentation (https://refine.dev/docs/routing/integrations/react-router#additional-components) - Next.js Router Documentation (https://refine.dev/docs/routing/integrations/next-js#pages-directory) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai132d ago
<@317433576721219584> kapa.ai is still learning and improving, please let us know how it did by reacting below
wise-white
wise-white132d ago
Hey @bastianwegge you dont need to pass whole resource object. We are already doing it based on the provided identifier. Also resource object unnecessary because you also need to provide action and id (for edit, show etc..)
ratty-blush
ratty-blush132d ago
Yeah the thing is that go doesn't seem to register identifiers but only resources. I created a small work around for this, maybe you have a better idea:
import { useResource } from '@refinedev/core';
import { Link } from 'react-router-dom';

type LinkToResourceProps = {
resource: string;
};

export const LinkToResource = ({
resource: resourceProp,
children,
}: LinkToResourceProps & React.PropsWithChildren) => {
const { resource, resources } = useResource(resourceProp);
const toResource = resource || resources.find((r) => r.list);
const toLink = toResource?.list?.toString() || '';

return <Link to={toLink}>{children}</Link>;
};
import { useResource } from '@refinedev/core';
import { Link } from 'react-router-dom';

type LinkToResourceProps = {
resource: string;
};

export const LinkToResource = ({
resource: resourceProp,
children,
}: LinkToResourceProps & React.PropsWithChildren) => {
const { resource, resources } = useResource(resourceProp);
const toResource = resource || resources.find((r) => r.list);
const toLink = toResource?.list?.toString() || '';

return <Link to={toLink}>{children}</Link>;
};
This way I can use <LinkToResource resource={identifier}>{identifier}</LinkToResource> @batuhanw just pinging in case you didn't register my messages
wise-white
wise-white132d ago
Hey @bastianwegge could you elaborate more on this one:
Yeah the thing is that go doesn't seem to register identifiers but only resources.
Do you mean, useGo doesn't find if you pass identifier?
ratty-blush
ratty-blush132d ago
Yes that's exactly what I mean.
wise-white
wise-white132d ago
Let me check that Are you using like this one?
const identifier = 'xxx'

useGo({ to: { resource: identifier, action: "list" }})
const identifier = 'xxx'

useGo({ to: { resource: identifier, action: "list" }})
ratty-blush
ratty-blush132d ago
Yes (sorry for the late answer)
wise-white
wise-white132d ago
Btw, actually there is a mistake in the documentation. We are not accepting resource object, resource’s type is string
ratty-blush
ratty-blush130d ago
Yeah okay but isn't this supposed to work with an identifier as well?
wise-white
wise-white129d ago
Yes. I've tested locally and it worked as expected. If you can provide a minimal reproducible example we can check it.
More Posts
Refine routerHi! Is there any chance to run refine without router(or with react-router-v5) but still use InferencHow to make Form.Item component name as an array?I have component <Form.Item label="Select Stand" name={["standIds"]}> I want modify component as a HR application in refine.devHi, i am trying to find link for Refine HR / HR Application. Where can i get the codes and demo? Thahow to make select component with custom resource result keys?I have resource url: dictionaries/items It returns json: [ { "id": 1, "name": "*getting error in customtitlle handlerGetting this error in custom title handler const customTitleHandler = ({ resource, action, params }how to detect inactive user to auto logoutHow can I make auto logout or expire the session after 5 minutes of user inactivity in refine?workflow applicationHi, can i use refine.dev to create a workflow application. Is there any example that i can refer to?If there is only one QR code on the login interface and one code for login parametersIf there is only one QR code on the login interface and one code for login parameters, how should I Hello, I've just cloned refine.dev fromHello, I've just cloned refine.dev from https://github.com/refinedev/refine.git and then ran the proHow can i use customDocumenttitle handlerThis is my App.tsx file i want to use custom DocumentTitleHandlerclient side paginationhow to make this page handle pagination at client sidepagination chakra ui inferenceIs there any suggestion how to give the proper data structure from backend so that the inference wilSave 2 resources at same timeHello, I'm using ant design with stripe4, how can I save 2 resources at same time?set field value in form antdformProps.form?.setFieldValue(id, selectedConfig?.id); <Form {...formProps} layout="vertical"> No matching exportsI got this error when running the project after accidently deleting yarn.lock and initializing yarn warnWhenUnsavedChanges is getting asked twiceI have to click "Cancel" or "Okay" twice when warnWhenUnsavedChanges is being active on my Modal forDoes someone has an example for a pageDoes someone has an example for a page in react for editing a singleton in the backend?How to make the Navigation menu not be based on resourcesHow can I change my navigation menu to not be based on resources?How to change the header from 'refine project' to my ownThis is my index.tsx file for header component import type { RefineThemedLayoutV2HeaderProps } from PocketBase - Open Source backend in 1 fi...Hello! I'm wondering if there are any https://pocketbase.io/ users here (or people interested in usi