Nyantastic
Routing in SolidJS microfrontend
Hey,
I'm working on a big app "portal" that would contain several modules, separated in different apps.
At first I worked on one of the modules as a standalone app. It has its own routing and works when I run it as an app. I can go to /mymodule/mypage/mything?param1=param1¶m2=param2, using the app's navigation buttons or the browser.
I recently made the change to export it as a library, so in the portal app I can call <MyModule ...props /> when I try to access the page /mymodule (the portal app also has its own routing and allows the user to navigate through the different modules).
It actually works, and when I navigate through the module, it still works: I can go to "/mymodule/mypage/mything?param1=param1¶m2=param2" using the in-app navigation buttons.
But when I refresh the page or try to access this URL with the browser, I access to portal's "/mymodule/mypage/mything?param1=param1¶m2=param2", which doesn't lead to anything.
Does anyone have a fix for this? I don't want to export every route of my module. If possible, I'd prefer to keep using my module's routing. Is it possible to make the browser use the module's route instead of portal's route, while keeping the possibility to navigate through the different modules? (meaning I still want to access /mymodule, /mymodule2, /mymodule3 from portal).
Thank you, sorry I'm a bit confused so I'm not sure I explained well.
3 replies
Multiple SolidJS apps in one?
Hello everyone,
This one will probably sound very silly but I'm new to this, it'll be hard to explain too.
I have a big monolith app (made with another framework), and I'd like to split it to several modules. Each module would be an individual SolidJS app, and I guess I would need to make some kind of "portal" app as well (a dashboard with buttons that redirect to each module, I'd also like to keep my navbar in the modules).
Right now I have a single module that works well as a single app, but I'm a bit stuck now. I've just discovered the concept of micro frontends, I was wondering if that was possible to implement using SolidJS?
Like, can I, instead of doing render(() => <MyApp />) in the index.tsx of my module, do an export and import it in the portal app?
How would it work for routing, for example? Can the portal app have its own routing, redirecting to the different modules, and each module having its own routes and architecture?
I'm sorry if that's a bit confused and messy. I hope I was clear enough with my poor vocabulary and knowledge 🫣
Thank you so much for your attention, and thanks in advance for your help!
1 replies
Trying to test a component containing a createResource
Hi!
I have a component that shows some content I fetch using createResource.
I wrapped the JSX in a <Suspense>, also tried with <Show when={myResource()}>, which works in the app. But when I try to test the component, it seems like myResource() is undefined, even though I mocked my fetcher and made it return Promise.resolve(someMockData).
With <Show>, the data was just never showed. And with <Suspense>, I had errors saying that the data I wanted to display was undefined (myResource().someAttribute for example).
I don't know if I explained well. I could provide some more information, but I wanted to know first if anyone already had this kind of issue trying to test a component using createResource.
(using vitest)
8 replies
Conditional fetching with createResource
Hi!
Alright, this might be a little bit silly but here's my problem:
I have a context provider component that fetches some data to be used later, with createResource. But I'm passing a boolean to the context provider as props, and I'd like the data to be fetched only if the boolean is set to true. What would be the best way to handle this?
I'll provide some code if needed but really it's just a simple createResource calling the simplest fetcher.
Thank you in advance, have a nice day!
5 replies
Context store issue with array
Hello,
I apologize but I just allowed myself to make a second post, since now I have a codesandbox to reproduce the issue I have in my app.
Situation: I have a store in a context, and the context object also contains setters to update the store (I tried to do the same as the CounterContext in the documentation: https://www.solidjs.com/docs/latest#createcontext).
The problem is, in my app I have several components, each of them containing the value at their own index in an array of my store. And each component receives, from the context, a setter function that updates the value in the array at their index.
My problem is that when I try to update a value at an index with my setter function, it updates all the elements of the array.
I reproduced it in this codesandbox: https://codesandbox.io/p/sandbox/jovial-fast-s7z0xs?file=%2Fsrc%2FApp.tsx&selection=%5B%7B%22endColumn%22%3A5%2C%22endLineNumber%22%3A12%2C%22startColumn%22%3A5%2C%22startLineNumber%22%3A12%7D%5D
=> I just made two buttons, each of them containing the value at the index 0 and 1 of the array in the store context. On click on the button, the setter function from the context is called, and is supposed to increment the value at the right index. We can see that the values in both buttons are incremented.
=> The code is a bit complicated for only two buttons, but in my app I need a lot of fetched data, initialize stuff etc, I tried to reproduce the architecture.
I don't know what I'm doing wrong here. Thank you for reading (again maybe), I wish you a nice day!
2 replies
Trying to update a value at index in a store array, updates all elements
Hello everyone,
I'm sorry this is probably gonna be a bit long, I'm having a hard time trying to explain myself.
Here is my issue:
I'm working on an app using a context, and inside this context there is a store. I did like in the stores_context tutorial: I have a function that initializes a store, and returns it with some setter functions to update it. I have a useContext() function that returns the whole thing and it works.
The store contains an object that contains an array of objects, and I'd like to update an attribute of the object at an index of the array. But when I call the function, the value is updated at all indexes, it seems.
And this happens in the app only ; I have an unit test (with vitest) which calls exactly the same function, but it works fine and only the object at the right index is updated.
I put the (very simplified) code in an attached file, I hope it worked. It's the function "setAttributeAtIndex" that causes issues. I've been console.logging it, it's called only once with the right index, I'm logging the context before and after the setMyContext. Right after the call, all of the indexes have been updated 😢
I also tried to change my setters and use the produce function, but it did exactly the same.
I've been stuck on this for a while now, does anyone see something that I'm doing wrong? What should I do?
Thanks a lot for your attention, I wish you a nice day!
13 replies
Testing SolidStart routes with Vitest
Hello!
I'm using SolidStart and Vitest to test the components. But I didn't manage to find a way to test the route files (such as the index.tsx in my route folders, or the dynamic ones [id].tsx for example).
I'm putting my test files.test.tsx next to the tested files, and the route ones kinda broke my app's routes. Do I necessarily have to move them somewhere else?
And then, any idea on how I should render and test my routes? Does anyone has an example of good practices to test a SolidStart route?
Thanks a lot for your help, I'm apologize if the questions are a bit stupid.
I wish you a nice day!
4 replies
createStore from fetched data ?
Hello!
I'm sorry for asking this because I'm sure this is stupid. But here I go:
I'm fetching kind of heavy data from my own API and using useRouteData() in my component, and would like to display it in a table with actions, like delete, update some values, etc.
So far so good, I'm getting the data, but it takes a few seconds, and my createStore call isn't waiting for the data to be available :
const routeData = useRouteData();
const [seriesRows, setSeriesRows] = createStore(routeData()?.map((data: Series) => ({
...data,
deleteSeries,
someMoreStuff
})) as SeriesRow[]);
What is the best, cleanest way to wait for routeData and then create the store?
Thank you for your time!
Wishing you a nice day.
7 replies