Rafael Hengles Posts - Answer Overflow

Rafael Hengles

Explore posts from servers

•Created by Rafael Hengles on 3/15/2024 in #support

events not fired inside react modal

I can't provide a small reproduction, I tried but I couldn't. I have a react project with reactstrap, and I'm using their standard Modal component. Inside of it, I'm mounting a Solid app ( I already have other Solid apps working normally inside of React but outside of the modal ). This app is not firing any click event handlers from Solid. There are no layers above in CSS. I can't figure it out for the life of me. I'm just hoping someone else has found this problem before and have any insights I can use to fix this. In the moment, I'm trying to create my own modal component to see if the problem is in reactstrap somehow. Thanks.

10 replies

SSolidJS

•Created by Rafael Hengles on 6/22/2023 in #support

typescript cssproperties

Solid accepts a type CSSProperties in style attributes. I want to createMemo() with a style value, but I can't type it with CSSProperties type from Solid. What do I do ?

3 replies

SSolidJS

•Created by Rafael Hengles on 6/20/2023 in #support

Dynamic Fragment

Is it possible for me to create a Fragment <> </> with the <Dynamic> tag ? Does Solid export a Fragment component that I can pass to Dynamic ?

4 replies

SSolidJS

•Created by Rafael Hengles on 6/13/2023 in #support

setstore mutate more than one property in one call

Assume I have a store with a list of objects. Can I write a single call to setStore() (without produce or reconcile) that modifies two or more properties of one or more objects in the array ? In other words, if produce and reconcile already do this, how do they do it ? What do they return that enables them to mutate one object (not replace it, because it causes components with For to be recreated instead of updated) and change two or more properties in one go ? Example:

  const [storeVal, setStoreVal] = createStore({
    a: [
      { b: 1, c: 2 },
      { b: 3, c: 4 },
    ],
  })
  const update = () => {
    setStoreVal('a', () => true, (ps, tv) => {
      console.log(`prevState, traversed`, { ps, tv })
      return { ...ps, b: ps.b + 1, c: ps.c + 2 }
    })
  }

  const [storeVal, setStoreVal] = createStore({
    a: [
      { b: 1, c: 2 },
      { b: 3, c: 4 },
    ],
  })
  const update = () => {
    setStoreVal('a', () => true, (ps, tv) => {
      console.log(`prevState, traversed`, { ps, tv })
      return { ...ps, b: ps.b + 1, c: ps.c + 2 }
    })
  }

The code above replaces the entire object. Again, it is a problem because it causes components with <For> to be recreated. Can I mutate two or more properties in one setState call without produce() or reconcile() ? What they do under the hood ?

12 replies

SSolidJS

•Created by Rafael Hengles on 6/9/2023 in #support

how to avoid child component re-creation with For

I have a store that is a list of tuples: each tuple is like ["type as string", { item, props }]. One of these items contains a value that I want to change like a controlled input, with a 'value' and a 'setValue' prop. The problem is that when I call "setStore" to update the item value, the entire tuple is a new tuple with the changed value, it's not the same old tuple with the value mutated in place. I use the <For> component to render this store list. AFAIU, when the For sees a new tuple, it removes the old <div> created by my component and recreates it all over again. How can I have a store that is a list of tuples and change one value in this tuple without Solid re-creating my child components all the time ?

16 replies

RRefine

•Created by inland-turquoise on 5/3/2023 in #ask-any-question

dynamic i18n resource route prefix path

I already configured the router package (react-router-dom v6) to add a "lang" path prefix to my app, so I can have these routes for example: - /en/posts - /es/posts - /fr/posts - etc... But now I have to configure the resources property in the <Refine> component, and I don't know how I can make these two things work together, as it seems that these paths must be static. I still don't understand fully in which circumstances these paths are used by Refine, as I don't use them in my menu navigation components. I also tried searching here and in github but didn't find anything related.

21 replies

RRefine

•Created by correct-apricot on 3/20/2023 in #ask-any-question

AuthPage does not handle any errors

Does the default AuthPage do any error handling by default ? I return an error in my authProvider login() function like this:

return {
    success: false,
    // error: new Error("Invalid email or password"), // first example in docs I saw
    error: {
        name: `Could not log in`, // second example
        message: String((error as any)?.message || error || `Error`)
    }
};

return {
    success: false,
    // error: new Error("Invalid email or password"), // first example in docs I saw
    error: {
        name: `Could not log in`, // second example
        message: String((error as any)?.message || error || `Error`)
    }
};

But the error does not appear on screen. To show the errors to the user is it required to swizzle this component ? I'm using the headless UI mode. Are the errors shown through notificationProvider ?

6 replies

RRefine

•Created by dependent-tan on 3/20/2023 in #ask-any-question

Data provider requests in loop when using Vite

11 replies

RRefine

•Created by genetic-orange on 3/17/2023 in #ask-any-question

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.

16 replies

RRefine

•Created by quickest-silver on 1/19/2023 in #ask-any-question

Can't use other locale on DateFields from Inferencer

For example, I'm building an app with Mantine. The docs says this: https://refine.dev/docs/api-reference/mantine/components/fields/date/

If you need other locales, you can load them on demand. Refer to loading locales

But there's two problems: (1) The inferencer calls <DateField value={...} />, it doesn't ask about locales. (2) The dayjs lib is not exposed on windowor as a global variable, as the docs above seems to imply (also is the method on the source Dayjs' docs to import other locales, loading from a global variable in the browser into another global variable). This is about i18n but this is not provided by i18nProvider, that's the closest tag available for this post.

4 replies

Gaming

Programming