badgateway/react-ketting

API for a hook that can manage resource creation and subsequent edits

evert opened this issue · 6 comments

evert commented

A common pattern in react apps is 'creation of a new resource' and 'subsequent edits'. In our case the component structure for the 'new case' is effectively identical to the 'update' case, except in the 'new item case', we do a POST request.

For demo purposes, I'm going to talk about the creation of a blog article.

This is the general flow:

  1. User clicks 'create article'
  2. User goes to an blank 'article' page.
  3. User writes article and hits 'save'.
  4. POST request gets sent to some (collection) resource, which creates a new article resource. Server sends back a Location header to the new resource and 201 created.
  5. User makes more edits
  6. User hits 'save' again
  7. PUT request gets sent to the article resource

Later on, the user might visit this article again and make subsequent edits.

This is one suggestion on how this might be called:

type Article = {
  title: string,
  body: string
}

// A new resource
const {
  loading,
  error,
  resourceState,
  setResourceState,
  saveResourceState
} = useResourceLifecycle({
  parent: parentResource, // what we will use for POST,
  initialData: {
    title: 'New article',
    body: ''
  }
});

// An existing resource
const {
  loading,
  error,
  resourceState,
  setResourceState,
  saveResourceState
} = useResourceLifecycle({
  resource: resource, // what we will use for PUT,
});
mihok commented

What is the loading variable intended for?

mihok commented

After chatting with @evert, it looks like the loading var is an indicator for the async aspect of the opration. Modelled after Apollo/GraphQL (reference)

mihok commented

This seems good for me, I'll have more comments after ive had time to use it in a live environment

What is the difference between setResourceState and saveResourceState?

evert commented

@simistern 'set' is for local changes as the user interacts with the resource. Save actually sends it to the server

evert commented

I'm not calling it put or post here because it can be either. Maybe 'submit' is a nice name though