S
SolidJS•15mo ago
zakpatterson

SolidStart - proper `_server` form action urls are only on page refresh.

I have several pages with forms on them. If I go directly to one of those pages, the correct action="/_server..." shows in the DOM's form tag. If I navigate to the page using solid-router, the action is: function () { [native code]} and the form POSTs to function () {%20%20%20 [native code]} On refresh the page properly shows the correct action url. I searched around but couldn't find this exact issue. I guess the action URL is being replaced during server rendering, but if I don't load that page directly, the client only has a reference to some function somewhere. "@solidjs/router": "^0.14.5", "@solidjs/start": "^1.0.6",
3 Replies
zakpatterson
zakpattersonOP•15mo ago
Let me know if my mistake seems obvious or I'll try to make a reproduction
Madaxen86
Madaxen86•15mo ago
Can you provide more details of how you've implemented the actions and the forms?
zakpatterson
zakpattersonOP•15mo ago
I think I figured this out, while trying to make a reproduction, but I don't entirely understand what is happening. I'm making actions like this: 
const withUser = async <A>(f: (user: User) => A): Promise<A> => {
   const session = await getSession()
   const userId = session.data.userId
   const user = await db.lookupUser(userId)
   if(user === undefined) throw "not allowed" // 401 error or whatever
   return f(user)
})

export const updateUserProfile = action(async (formData): Promise<User> => {
   'use server'
   return withUser((currentUser) => {
      //do update
      const updatedUser = db.updateUser(currentUser.id, userFromFormData(formData)) 
      return updatedUser
   })
})
const withUser = async <A>(f: (user: User) => A): Promise<A> => {
   const session = await getSession()
   const userId = session.data.userId
   const user = await db.lookupUser(userId)
   if(user === undefined) throw "not allowed" // 401 error or whatever
   return f(user)
})

export const updateUserProfile = action(async (formData): Promise<User> => {
   'use server'
   return withUser((currentUser) => {
      //do update
      const updatedUser = db.updateUser(currentUser.id, userFromFormData(formData)) 
      return updatedUser
   })
})
It seems the 'use server' comment is required on the withUser function above, as well. But I don't quite get why. Why would it be required there but not on the db function calls? @Madaxen86 and anyone that sees this. Thank you!

Did you find this page helpful?