R
Refine

ask-any-question

what is the correct way to list media in the interface export when using strapi v4 media uploader?

Rrival-black4/18/2023
if I am using strapi with the media uploader, what would the correct way to list that media in the interface export?
Kkapa.ai4/18/2023
Hi @erekyu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To list media in the interface when using Strapi with Refine, you can follow these steps: 1. Create an interface for the data from your Strapi API, including the media field. For example, if you have a Product collection with an Image field, your interface might look like this:
export interface IProduct {
id: number;
title: string;
description: string;
image: {
url: string;
};
}
export interface IProduct {
id: number;
title: string;
description: string;
image: {
url: string;
};
}
2. In your list component, use the useDataGrid hook to fetch the data and display it in a table. For example, in a ProductList component:
import { useDataGrid } from "@pankod/refine";

const { dataGridProps } = useDataGrid<IProduct>();
import { useDataGrid } from "@pankod/refine";

const { dataGridProps } = useDataGrid<IProduct>();
3. Define the columns for your table, including a column for the media field. To display the image, you can use the renderCell function:
import { GridColumns } from "@mui/x-data-grid";

const columns = React.useMemo<GridColumns<IProduct>>(
() => [
// Other columns...
{
field: "image",
headerName: "Image",
minWidth: 150,
renderCell: function render({ row }) {
return <img src={row.image?.url} alt={row.title} width="100" />;
},
},
// Other columns...
],
[]
);
import { GridColumns } from "@mui/x-data-grid";

const columns = React.useMemo<GridColumns<IProduct>>(
() => [
// Other columns...
{
field: "image",
headerName: "Image",
minWidth: 150,
renderCell: function render({ row }) {
return <img src={row.image?.url} alt={row.title} width="100" />;
},
},
// Other columns...
],
[]
);
4. Finally, use the DataGrid component to display the table with the fetched data and defined columns:
import { DataGrid } from "@mui/x-data-grid";

<DataGrid {...dataGridProps} columns={columns} />;
import { DataGrid } from "@mui/x-data-grid";

<DataGrid {...dataGridProps} columns={columns} />;
This will display the media (e.g., images) in the interface when listing the records. For more information on listing records with Refine and Strapi, you can refer to the following sources:
Kkapa.ai4/18/2023
- How to Build a React Admin Panel with Mantine and Strapi (https://refine.dev/blog/react-admin-panel/) - Building a CRUD app with Material UI and Strapi in React (https://refine.dev/blog/build-admin-panel-with-material-ui-and-strapi/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
How to Build a React Admin Panel with Mantine and Strapi | refine
We'll be building a simple React Admin Panel with refine and Mantine using Strapi as a backend service.
Building a CRUD app with Material UI and Strapi in React | refine
How to build CRUD admin panel with Material UI?
Kkapa.ai4/18/2023
<@66380739771379712> kapa.ai is still learning and improving, please let us how it did by reacting below
Rrival-black4/18/2023
@kapa.ai what would the edit page look like
Kkapa.ai4/18/2023
Let me check the knowledge base for you. One moment! :books: ---------------------- The edit page for a record in a Refine application would typically include a form with input fields for each property of the record. Here's an example of what an edit page might look like for a Post resource: 1. Create a PostEdit component in your pages/posts directory:
// src/pages/posts/edit.tsx

import { Edit, IResourceComponentsProps, Input, useForm } from "@pankod/refine";

export const PostEdit: React.FC<IResourceComponentsProps> = () => {
const { formProps, saveButtonProps } = useForm();

return (
<Edit saveButtonProps={saveButtonProps}>
<Input name="title" label="Title" {...formProps} />
<Input name="content" label="Content" {...formProps} />
{/* Add other input fields as needed */}
</Edit>
);
};
// src/pages/posts/edit.tsx

import { Edit, IResourceComponentsProps, Input, useForm } from "@pankod/refine";

export const PostEdit: React.FC<IResourceComponentsProps> = () => {
const { formProps, saveButtonProps } = useForm();

return (
<Edit saveButtonProps={saveButtonProps}>
<Input name="title" label="Title" {...formProps} />
<Input name="content" label="Content" {...formProps} />
{/* Add other input fields as needed */}
</Edit>
);
};
2. Import the PostEdit component in your pages/posts/index.tsx file:
// src/pages/posts/index.tsx

export * from "./edit";
// src/pages/posts/index.tsx

export * from "./edit";
3. Add the PostEdit component to the resources prop of the Refine component in your App.tsx file:
// src/App.tsx

import {
PostList,
PostCreate,
PostEdit,
} from "pages/posts";

// ...

const App: React.FC = () => {
return (
// ...
<Refine
// ...
resources={[
{
name: "posts",
list: PostList,
create: PostCreate,
edit: PostEdit,
},
]}
/>
// ...
);
};
// src/App.tsx

import {
PostList,
PostCreate,
PostEdit,
} from "pages/posts";

// ...

const App: React.FC = () => {
return (
// ...
<Refine
// ...
resources={[
{
name: "posts",
list: PostList,
create: PostCreate,
edit: PostEdit,
},
]}
/>
// ...
);
};
After completing these steps, clicking the edit button for a post should redirect you to the edit page, where you can update the record data. For more information on creating an edit page with Refine and Strapi, you can refer to the following sources:
Kkapa.ai4/18/2023
- How to Build a React Admin Panel with Mantine and Strapi (https://refine.dev/blog/react-admin-panel/) - Building a CRUD app with Material UI and Strapi in React (https://refine.dev/blog/build-admin-panel-with-material-ui-and-strapi/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
How to Build a React Admin Panel with Mantine and Strapi | refine
We'll be building a simple React Admin Panel with refine and Mantine using Strapi as a backend service.
Building a CRUD app with Material UI and Strapi in React | refine
How to build CRUD admin panel with Material UI?
Kkapa.ai4/18/2023
<@66380739771379712> kapa.ai is still learning and improving, please let us how it did by reacting below
Rrival-black4/18/2023
@kapa.ai no what I mean is what would the edit page look like when using the strapi media uploader and using export interface to list the media
Kkapa.ai4/18/2023
Let me check the knowledge base for you. One moment! :books: ---------------------- To create an edit page with a Strapi media uploader, you can use the Upload.Dragger component from Ant Design. Here's an example of an edit page for a Post resource with an image field: 1. Create an interface for the Post resource, including the image field:
// src/interfaces.ts

export interface IPost {
id: string;
title: string;
image: {
url: string;
};
}
// src/interfaces.ts

export interface IPost {
id: string;
title: string;
image: {
url: string;
};
}
2. Create a PostEdit component in your pages/posts directory:
// src/pages/posts/edit.tsx

import {
Edit,
useForm,
getValueFromEvent,
} from "@pankod/refine";
import { Form, Input, Upload } from "antd";
import { useApiUrl } from "@pankod/refine";
import { IPost } from "interfaces";

export const PostEdit: React.FC = () => {
const { formProps, saveButtonProps } = useForm<IPost>();
const apiUrl = useApiUrl();

return (
<Edit saveButtonProps={saveButtonProps}>
<Form {...formProps} layout="vertical">
<Form.Item label="Title" name="title" rules={[{ required: true }]}>
<Input />
</Form.Item>
<Form.Item label="Image">
<Form.Item
name="image"
valuePropName="fileList"
getValueFromEvent={getValueFromEvent}
noStyle
>
<Upload.Dragger
name="file"
action={`${apiUrl}/media/upload`}
listType="picture"
maxCount={1}
multiple={false}
>
<p className="ant-upload-text">
Drag & drop a file in this area
</p>
</Upload.Dragger>
</Form.Item>
</Form.Item>
</Form>
</Edit>
);
};
// src/pages/posts/edit.tsx

import {
Edit,
useForm,
getValueFromEvent,
} from "@pankod/refine";
import { Form, Input, Upload } from "antd";
import { useApiUrl } from "@pankod/refine";
import { IPost } from "interfaces";

export const PostEdit: React.FC = () => {
const { formProps, saveButtonProps } = useForm<IPost>();
const apiUrl = useApiUrl();

return (
<Edit saveButtonProps={saveButtonProps}>
<Form {...formProps} layout="vertical">
<Form.Item label="Title" name="title" rules={[{ required: true }]}>
<Input />
</Form.Item>
<Form.Item label="Image">
<Form.Item
name="image"
valuePropName="fileList"
getValueFromEvent={getValueFromEvent}
noStyle
>
<Upload.Dragger
name="file"
action={`${apiUrl}/media/upload`}
listType="picture"
maxCount={1}
multiple={false}
>
<p className="ant-upload-text">
Drag & drop a file in this area
</p>
</Upload.Dragger>
</Form.Item>
</Form.Item>
</Form>
</Edit>
);
};
3. Import the PostEdit component in your pages/posts/index.tsx file:
// src/pages/posts/index.tsx

export * from "./edit";
// src/pages/posts/index.tsx

export * from "./edit";
Kkapa.ai4/18/2023
4. Add the PostEdit component to the resources prop of the Refine component in your App.tsx file:
// src/App.tsx

import {
PostList,
PostCreate,
PostEdit,
} from "pages/posts";

// ...

const App: React.FC = () => {
return (
// ...
<Refine
// ...
resources={[
{
name: "posts",
list: PostList,
create: PostCreate,
edit: PostEdit,
},
]}
/>
// ...
);
};
// src/App.tsx

import {
PostList,
PostCreate,
PostEdit,
} from "pages/posts";

// ...

const App: React.FC = () => {
return (
// ...
<Refine
// ...
resources={[
{
name: "posts",
list: PostList,
create: PostCreate,
edit: PostEdit,
},
]}
/>
// ...
);
};
This example demonstrates how to create an edit page with a Strapi media uploader for a Post resource with an image field. The Upload.Dragger component allows you to upload images to Strapi. For more information on creating an edit page with a media uploader, you can refer to the following source: - Multipart Upload - Refine Documentation (https://refine.dev/docs/advanced-tutorials/upload/multipart-upload) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Multipart Upload | refine
We will show you how to multipart upload with refine.
Kkapa.ai4/18/2023
<@66380739771379712> kapa.ai is still learning and improving, please let us how it did by reacting below
Rrival-black4/18/2023
@kapa.ai when i do that for my edit page I get the following error "e is not iterable TypeError: e is not iterable"
Kkapa.ai4/18/2023
Let me check the knowledge base for you. One moment! :books: ---------------------- It seems like you're encountering an issue with the getValueFromEvent function. This function is used to handle the file upload event and extract the necessary information. The error you're encountering might be due to an incorrect implementation of this function. To fix the issue, you can use the getValueFromEvent function provided by Refine. Update your PostEdit component as follows:
// src/pages/posts/edit.tsx

import {{
Edit,
useForm,
getValueFromEvent, // Import this function from Refine
}} from "@pankod/refine";
import {{ Form, Input, Upload }} from "antd";
import {{ useApiUrl }} from "@pankod/refine";
import {{ IPost }} from "interfaces";

export const PostEdit: React.FC = () => {{
const {{ formProps, saveButtonProps }} = useForm<IPost>();
const apiUrl = useApiUrl();

return (
<Edit saveButtonProps={{saveButtonProps}}>
<Form {{...formProps}} layout="vertical">
<Form.Item label="Title" name="title" rules={{[{{ required: true }}]}}>
<Input />
</Form.Item>
<Form.Item label="Image">
<Form.Item
name="image"
valuePropName="fileList"
getValueFromEvent={{getValueFromEvent}} // Use the imported function
noStyle
>
<Upload.Dragger
name="file"
action={{`${{apiUrl}}/media/upload`}}
listType="picture"
maxCount={{1}}
multiple={{false}}
>
<p className="ant-upload-text">
Drag & drop a file in this area
</p>
</Upload.Dragger>
</Form.Item>
</Form.Item>
</Form>
</Edit>
);
}};
// src/pages/posts/edit.tsx

import {{
Edit,
useForm,
getValueFromEvent, // Import this function from Refine
}} from "@pankod/refine";
import {{ Form, Input, Upload }} from "antd";
import {{ useApiUrl }} from "@pankod/refine";
import {{ IPost }} from "interfaces";

export const PostEdit: React.FC = () => {{
const {{ formProps, saveButtonProps }} = useForm<IPost>();
const apiUrl = useApiUrl();

return (
<Edit saveButtonProps={{saveButtonProps}}>
<Form {{...formProps}} layout="vertical">
<Form.Item label="Title" name="title" rules={{[{{ required: true }}]}}>
<Input />
</Form.Item>
<Form.Item label="Image">
<Form.Item
name="image"
valuePropName="fileList"
getValueFromEvent={{getValueFromEvent}} // Use the imported function
noStyle
>
<Upload.Dragger
name="file"
action={{`${{apiUrl}}/media/upload`}}
listType="picture"
maxCount={{1}}
multiple={{false}}
>
<p className="ant-upload-text">
Drag & drop a file in this area
</p>
</Upload.Dragger>
</Form.Item>
</Form.Item>
</Form>
</Edit>
);
}};
By using the getValueFromEvent function provided by Refine, you should be able to resolve the "e is not iterable" error.
Kkapa.ai4/18/2023
For more information on handling file uploads with Refine, you can refer to the following source: - Multipart Upload - Refine Documentation (https://refine.dev/docs/advanced-tutorials/upload/multipart-upload) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Multipart Upload | refine
We will show you how to multipart upload with refine.
Kkapa.ai4/18/2023
<@66380739771379712> kapa.ai is still learning and improving, please let us how it did by reacting below
Rrival-black4/18/2023
@kapa.ai my new error for getValueFromEvent is "(fileList []).forEach is not a function TypeError: (fileList []).forEach is not a function"
Kkapa.ai4/18/2023
Let me check the knowledge base for you. One moment! :books: ---------------------- It seems like the getValueFromEvent function is expecting an array, but it's receiving a non-array value. To fix this issue, you can create a custom getValueFromEvent function that handles the file upload event and ensures that the returned value is an array. Update your PostEdit component with a custom getValueFromEvent function as follows:
// src/pages/posts/edit.tsx

import {{
Edit,
useForm,
}} from "@pankod/refine";
import {{ Form, Input, Upload }} from "antd";
import {{ useApiUrl }} from "@pankod/refine";
import {{ IPost }} from "interfaces";

export const PostEdit: React.FC = () => {{
const {{ formProps, saveButtonProps }} = useForm<IPost>();
const apiUrl = useApiUrl();

// Custom getValueFromEvent function
const customGetValueFromEvent = (e: any) => {{
if (Array.isArray(e)) {{
return e;
}}
return e && e.fileList ? e.fileList : [];
}};

return (
<Edit saveButtonProps={{saveButtonProps}}>
<Form {{...formProps}} layout="vertical">
<Form.Item label="Title" name="title" rules={{[{{ required: true }}]}}>
<Input />
</Form.Item>
<Form.Item label="Image">
<Form.Item
name="image"
valuePropName="fileList"
getValueFromEvent={{customGetValueFromEvent}} // Use the custom function
noStyle
>
<Upload.Dragger
name="file"
action={{`${{apiUrl}}/media/upload`}}
listType="picture"
maxCount={{1}}
multiple={{false}}
>
<p className="ant-upload-text">
Drag & drop a file in this area
</p>
</Upload.Dragger>
</Form.Item>
</Form.Item>
</Form>
</Edit>
);
}};
// src/pages/posts/edit.tsx

import {{
Edit,
useForm,
}} from "@pankod/refine";
import {{ Form, Input, Upload }} from "antd";
import {{ useApiUrl }} from "@pankod/refine";
import {{ IPost }} from "interfaces";

export const PostEdit: React.FC = () => {{
const {{ formProps, saveButtonProps }} = useForm<IPost>();
const apiUrl = useApiUrl();

// Custom getValueFromEvent function
const customGetValueFromEvent = (e: any) => {{
if (Array.isArray(e)) {{
return e;
}}
return e && e.fileList ? e.fileList : [];
}};

return (
<Edit saveButtonProps={{saveButtonProps}}>
<Form {{...formProps}} layout="vertical">
<Form.Item label="Title" name="title" rules={{[{{ required: true }}]}}>
<Input />
</Form.Item>
<Form.Item label="Image">
<Form.Item
name="image"
valuePropName="fileList"
getValueFromEvent={{customGetValueFromEvent}} // Use the custom function
noStyle
>
<Upload.Dragger
name="file"
action={{`${{apiUrl}}/media/upload`}}
listType="picture"
maxCount={{1}}
multiple={{false}}
>
<p className="ant-upload-text">
Drag & drop a file in this area
</p>
</Upload.Dragger>
</Form.Item>
</Form.Item>
</Form>
</Edit>
);
}};
Kkapa.ai4/18/2023
By using the custom getValueFromEvent function, you should be able to resolve the "(fileList || []).forEach is not a function" error. For more information on handling file uploads with Refine, you can refer to the following source: - Multipart Upload - Refine Documentation (https://refine.dev/docs/advanced-tutorials/upload/multipart-upload) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Multipart Upload | refine
We will show you how to multipart upload with refine.
Kkapa.ai4/18/2023
<@66380739771379712> kapa.ai is still learning and improving, please let us how it did by reacting below
Rrival-black4/18/2023
@kapa.ai still getting the same error
Kkapa.ai4/18/2023
Let me check the knowledge base for you. One moment! :books: @erekyu That's a great question, but unfortunately I am only capable of responding to a maximum of three questions per thread. Don't hesitate to create a new thread for any further questions you have though. I'm here to help!
Xxenial-black4/18/2023
Hey @erekyu, https://github.com/refinedev/refine/pull/4196 I've created a PR to resolve file upload issues with refine. Now, It's on the review process. But, you can see the changes on PR like documentation, fixed examples and others. I hope it helps you 🙏
Rrival-black4/18/2023
do you think that is also the reason its not listing files that already exist on the edit page?
Xxenial-black4/18/2023
Yes, I do. As far as I understand, the strapi API has changed and our getValueProps method is outdated. I updated it and problem solved on the example.
Rrival-black4/18/2023
You are a rock star, I thought I was doing something wrong this hole time! I went over every example deleted and reinstalled and reset up strapi and refine multiple times I thought I was going crazy
Xxenial-black4/18/2023
Frankly, I went through similar processes while I was doing it 🤣
Rrival-black4/18/2023
did you ever run into
e is not iterable
TypeError: e is not iterable
e is not iterable
TypeError: e is not iterable
because I made all the changes and the files upload, and attach perfectly but when i go back into the edit i get
e is not iterable
TypeError: e is not iterable
at G (http://localhost:3000/static/js/bundle.js:36243:76)
at getValueProps (http://localhost:3000/static/js/bundle.js:1867:105)
at Field._this.getControlled (http://localhost:3000/static/js/bundle.js:208373:208)
at Field._this.getOnlyChild (http://localhost:3000/static/js/bundle.js:208328:224)
at Field.render (http://localhost:3000/static/js/bundle.js:208470:37)
at finishClassComponent (http://localhost:3000/static/js/bundle.js:266235:35)
at updateClassComponent (http://localhost:3000/static/js/bundle.js:266192:28)
at beginWork (http://localhost:3000/static/js/bundle.js:267818:20)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:252809:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:252853:20)
e is not iterable
TypeError: e is not iterable
at G (http://localhost:3000/static/js/bundle.js:36243:76)
at getValueProps (http://localhost:3000/static/js/bundle.js:1867:105)
at Field._this.getControlled (http://localhost:3000/static/js/bundle.js:208373:208)
at Field._this.getOnlyChild (http://localhost:3000/static/js/bundle.js:208328:224)
at Field.render (http://localhost:3000/static/js/bundle.js:208470:37)
at finishClassComponent (http://localhost:3000/static/js/bundle.js:266235:35)
at updateClassComponent (http://localhost:3000/static/js/bundle.js:266192:28)
at beginWork (http://localhost:3000/static/js/bundle.js:267818:20)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:252809:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:252853:20)
Xxenial-black4/18/2023
Can you share your API response on edit page?
Rrival-black4/18/2023
if i remove
valuePropName='fileList'
getValueProps={(data) => getValueProps(data, API_URL)}
valuePropName='fileList'
getValueProps={(data) => getValueProps(data, API_URL)}
i can get the page to load, this is the response to my api call for the file i am trying to get:
contract 18 items
id: 17
name: "testFile.pdf"
alternativeText: null
caption: null
width: null
height: null
formats: null
hash: "43e9b4f7340f98200b70b74021342391"
ext: ".pdf"
mime: "application/pdf"
size: 342.36
url: "https://mmgi.nyc3.cdn.digitaloceanspaces.com/tsd/43e9b4f7340f98200b70b74021342391.pdf"
previewUrl: null
provider: "strapi-provider-upload-dos"
provider_metadata: null
createdAt: "2023-04-18T20:19:53.923Z"
updatedAt: "2023-04-18T20:19:53.923Z"
related 1 item
▶ 0 9 items
id: 1
__type: "api::project.project"
address: "123 test st"
city: "Boynton beach"
zipCode: "33426"
projectType: "Pool Enclosure"
createdAt: "2023-04-07T13:54:55.360Z"
updatedAt: "2023-04-18T20:19:58.417Z"
contractPrice: "30,000.00"
contract 18 items
id: 17
name: "testFile.pdf"
alternativeText: null
caption: null
width: null
height: null
formats: null
hash: "43e9b4f7340f98200b70b74021342391"
ext: ".pdf"
mime: "application/pdf"
size: 342.36
url: "https://mmgi.nyc3.cdn.digitaloceanspaces.com/tsd/43e9b4f7340f98200b70b74021342391.pdf"
previewUrl: null
provider: "strapi-provider-upload-dos"
provider_metadata: null
createdAt: "2023-04-18T20:19:53.923Z"
updatedAt: "2023-04-18T20:19:53.923Z"
related 1 item
▶ 0 9 items
id: 1
__type: "api::project.project"
address: "123 test st"
city: "Boynton beach"
zipCode: "33426"
projectType: "Pool Enclosure"
createdAt: "2023-04-07T13:54:55.360Z"
updatedAt: "2023-04-18T20:19:58.417Z"
contractPrice: "30,000.00"
oh i missed part ill edit that
Rrival-black4/18/2023
yes
Xxenial-black4/18/2023
I can't quite understand here, but is your file field an array or an object? Are you sure you are using your own getValueProps function? Or are you importing from @refinedev/strapi-v4? Because the changes in PR have not yet been released
Rrival-black4/18/2023
i copied your changes into my node_modules (removed the files and updated the array)
Xxenial-black4/18/2023
The error is caused by trying to spread an object in an array. Can you try creating an own getValueProps function and use it. In my opinion node_modules changes don't work
Rrival-black4/19/2023
sure i will try that driving home now will test it later this evening, ty again for your time i apricate it that did it ty sooo much!

Looking for more? Join the community!

R
Refine

ask-any-question

Join Server
Recommended Posts
How to add custom page(like dashboard) in nextjs?i want to add a dashboard page in refine base-on nextjshow to configure refine to present the url in a sub directoryI have a project in refine which is installed in a sub directory (eg: http.site.com/subfolder). Howchange faviconhow about dev how can i change the favicon.icoSameSite attributeHi, Running the basic cli generated site with google login I get this error in the console. Indicahow do i import a refine ant table of admin panel as pdf can i do it just like how i do with normalhow do i import a refine ant table of admin panel as pdf can i do it just like how i do with normalHow to sort DataGrid of computed column?One of my columns in the MUI x-DataGrid is a computed column. When I attempt to click the header to One rangepicker to filter two lists using useSimpleListCan I use a single rangepicker to filter two lists using useSimpleList. For example if I submit a rarealTimehi all how I can get real-time updates for the data I use useTable hook to get the data, is there a Ant Design and mobile friendlyHello All! I have been developing a admin ui for my small personal company, and i came across a use Inferencer@kapa.ai please give more details on the fieldTransformer prop. How to use it and examples.MantineHeaderHow could you change the logo in the MantineHeader in mantine?How do I style the sidebar and its itemsHow do I style the sidebar and its items? I've looked at older answers but I don't really get it. I Differences between code generated using create-refine-app through yarn vs through npmHey all, just started learning about Refine today and went to start the tutorial using the headless Avoid resource loadinghey guys, I have that routes. when I navigate to list, my list component call a different resourceRefine to navigator resourse,Hi dev's, how are you, how can I add elements to the navigation menu but that are not from the crud,I have media attached but just getting a list of nothing filesI can not figure out what I am doing wrong and I am sure its something simple. I want to list the fiimport from React setupCould this piece of code "import React, { useState, useEffect } from 'react';" be typed into any javUpdate Edit Modal after an EventIn edit modal, I am updating few fields on an event, How to re-render the UI?How to categorize sider items and make it collapseableHi, i want to make my sider items categorized. for example: - Users - User Profiles - User photos Multiple modalsHi all, I'm using headless useModal (https://refine.dev/docs/api-reference/core/hooks/ui/useModal/