deep-jade•6d ago

Blank page after I delete or create an item on my "table"

I'm encountering an error, I've been trying to solve it for over 24 hours now but I'm stuck, maybe there's something I'm not seeing but the issue doesn't really seem to be related to my code directly since I'm using the default <DeleteButton /> (antd) for example and even though it delete's the item properly (I can verify that by refreshing the page or by the small motion the list shows for a millisecond before showing blank). It seems that for some reason it's trying to do something else afterwards on the re-rendering process that is preventing it from properly doing it. The error I see when I debug is the following (attached image 1, shows the exception thrown), in the second image we can see that newChild is "company". I also don't know where this "{resource}" is coming from, I don't have anything like that in my code. I'll attach the companies page and the CreateTable modal form which are the only parts of the code relevant to this issue. Not sure what else to say, again, it's a very weird issue because it actually does the mutation properly, it deletes and creates, but after a split second it looks like it's trying to render something new or that doesn't exist and is giving me a blank page before that. I tried to find similar issues here or on the internet and couldn't find a proper solution or maybe I'm just blind and simply can't see it xd. Thanks beforehand.

create.tsx

index.tsx

6 Replies

kapa.ai•6d ago

Hi @JonFckinSnow. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in your question and the knowledge sources available, it seems you're experiencing an issue with the deletion and creation of items in a table using refine and Ant Design components. While I don't have enough specific information to pinpoint the exact cause of your problem, I can provide some insights and suggestions based on similar issues reported by other users. 1. Resource Mismatch: One common cause of invalidation and re-rendering issues is a mismatch between the resource used in useTable and the resource used in useDelete or other mutation hooks. As mentioned in the Invalidation issue, if these resources don't match, you may need to manage the invalidation manually. 2. Invalidation and Optimistic Updates: The issue you're experiencing, where the item is deleted but the list doesn't refresh properly, could be related to invalidation and optimistic updates not triggering correctly. This was discussed in the same Invalidation issue. 3. Custom Resource Names: If you're using custom resource names, especially nested ones like "categories/1/posts", you might need to handle invalidation manually. This was discussed in a GitHub issue about custom resources. 4. React Query Version Compatibility: There have been issues reported related to React Query version compatibility. Make sure you're using a version of React Query that's compatible with your version of refine. This was mentioned in a GitHub issue about mutationObserver errors. To troubleshoot your issue, you could try the following: 1. Check if your resource names are consistent across your useTable and mutation hooks. 2. If you're using custom resource names, try manually invalidating the resource after deletion:

   import { useInvalidate } from "@refinedev/core";

   const invalidate = useInvalidate();

   // ...

   <DeleteButton
     onSuccess={() => {
       invalidate({
         resource: "your-resource-name",
         invalidates: ["list"],
       });
     }}
     // ... other props
   />

   import { useInvalidate } from "@refinedev/core";

   const invalidate = useInvalidate();

   // ...

   <DeleteButton
     onSuccess={() => {
       invalidate({
         resource: "your-resource-name",
         invalidates: ["list"],
       });
     }}
     // ... other props
   />

3. Verify that your refine and React Query versions are compatible. 4. If possible, try to reproduce the issue using a basic refine example, like the Ant Design tutorial. This can help isolate whether the problem is specific to your implementation or a more general issue. If these suggestions don't resolve your issue, it would be helpful to see more of your code, especially the parts where you set up your resources and use the useTable hook. Additionally, the full error message and stack trace could provide more context for debugging. Remember, without seeing your full code and setup, it's challenging to provide a definitive solution. If the problem persists, consider creating a minimal reproducible example and sharing it on the refine GitHub repository or their support channels for more specific assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6d ago

<@709555396292902953> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

deep-jadeOP•6d ago

@kapa.ai Nope, it's not related at all to what you said I figured it out by commenting everything I had recently added that included a i18 provider, as soon as I commented it the blank pages stopped showing, but that raises another problem, I need for the app to be in Spanish so I added this provider: const i18nProvider = { translate: (key: string, fallback: string) => { const translations: Record<string, string> = { "buttons.filter": "Filtrar", "buttons.clear": "Limpiar", "buttons.create": "Crear", "buttons.edit": "Editar", "buttons.delete": "Eliminar", "buttons.save": "Guardar", "buttons.cancel": "Cancelar", "buttons.submit": "Enviar", "table.actions": "Acciones", "table.name": "Nombre", "table.email": "Correo Electrónico", }; return translations[key] || fallback; }, changeLocale: (locale: string) => { return Promise.resolve(); }, getLocale: () => "es", }; it worked perfectly fine when showing the list, and it showed the text in Spanish properly, so I need to know if there's anything wrong with my provider that might be causing the crash

kapa.ai•6d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for providing more context about your issue. It seems that the problem is indeed related to your i18n provider implementation. Let's analyze your i18n provider and suggest some improvements based on the refine documentation. The i18n provider you've implemented is close to what refine expects, but there are a few adjustments we can make to ensure it works correctly: 1. The translate function signature is slightly different from what refine expects. According to the i18n Provider documentation, the correct signature should be:

translate: (key: string, options?: any, defaultMessage?: string) => string

translate: (key: string, options?: any, defaultMessage?: string) => string

2. The changeLocale function should return a Promise, which you've correctly implemented. 3. The getLocale function is correct. Here's an improved version of your i18n provider that adheres more closely to refine's expectations:

const i18nProvider: I18nProvider = {
  translate: (key: string, options?: any, defaultMessage?: string) => {
    const translations: Record<string, string> = {
      "buttons.filter": "Filtrar",
      "buttons.clear": "Limpiar",
      "buttons.create": "Crear",
      "buttons.edit": "Editar",
      "buttons.delete": "Eliminar",
      "buttons.save": "Guardar",
      "buttons.cancel": "Cancelar",
      "buttons.submit": "Enviar",
      "table.actions": "Acciones",
      "table.name": "Nombre",
      "table.email": "Correo Electrónico",
    };
    return translations[key] || defaultMessage || key;
  },
  changeLocale: (lang: string) => Promise.resolve(),
  getLocale: () => "es",
};

const i18nProvider: I18nProvider = {
  translate: (key: string, options?: any, defaultMessage?: string) => {
    const translations: Record<string, string> = {
      "buttons.filter": "Filtrar",
      "buttons.clear": "Limpiar",
      "buttons.create": "Crear",
      "buttons.edit": "Editar",
      "buttons.delete": "Eliminar",
      "buttons.save": "Guardar",
      "buttons.cancel": "Cancelar",
      "buttons.submit": "Enviar",
      "table.actions": "Acciones",
      "table.name": "Nombre",
      "table.email": "Correo Electrónico",
    };
    return translations[key] || defaultMessage || key;
  },
  changeLocale: (lang: string) => Promise.resolve(),
  getLocale: () => "es",
};

The main changes are: 1. Added the options parameter to the translate function, even if you're not using it. 2. Changed fallback to defaultMessage in the translate function to match refine's expected signature. 3. If a translation is not found, it now returns the defaultMessage if provided, or the key itself as a last resort. After making these changes, try integrating this i18n provider into your refine application:

import { Refine } from "@refinedev/core";

const App: React.FC = () => {
  return (
    <Refine
      i18nProvider={i18nProvider}
      /* ... other props ... */
    >
      {/* ... */}
    </Refine>
  );
};

import { Refine } from "@refinedev/core";

const App: React.FC = () => {
  return (
    <Refine
      i18nProvider={i18nProvider}
      /* ... other props ... */
    >
      {/* ... */}
    </Refine>
  );
};

If you're still experiencing issues after these changes, it might be helpful to: 1. Check if there are any console errors related to i18n or translation. 2. Verify that all the keys you're using in your components are present in your translations object. 3. Make sure you're not accidentally using any untranslated keys that might cause rendering issues. If the problem persists, you might want to consider using a more robust i18n solution like react-i18next, which is recommended in the refine documentation. This could potentially provide better error handling and more features for managing translations. Remember, if you continue to face issues, it would be helpful to see more of your code, especially the components where you're using translations, to provide more specific guidance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6d ago

<@709555396292902953> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

deep-jadeOP•6d ago

Great, by using your version of the provider it works perfectly, thanks a lot.

Blank page after I delete or create an item on my "table"

Did you find this page helpful?