Skip to main content

Lifecycle controlflow diagrams using Mermaid

· One min read
Nathaniel Tucker

Mermaid is a cool way of creating diagrams in markdown. It was recently integrated into Github Markdown and added to this site's framework as well.

A lot of concepts are much easy to convey using visualizations so we quickly started using this in the docs. To start off we have added control flow diagrams to help with hooking into the lifecycles of Rest Hooks for customizations as well as understanding how it operates.

RestEndpoint​

Perform Fetch
Prepare Fetch
parseResponse()
fetchResponse()
process()
URL
url(...args)
urlPrefix
path
INIT
getRequestInit(...args)
getHeaders()
method
signal

Endpoint Success​

FETCH
FETCH
SET
reducer:SET
Endpoint.update()
normalize
reducer:FETCH
SET
Endpoint.update()
normalize
Endpoint.?getOptimisticResponse()
managers
resolves
endpoint(...args)
NetworkManager
Controller.resolve(response)
dispatch(SET)
Controller.fetch
dispatch(FETCH)
Endpoint.key(...args)

Endpoint Error​

FETCH
FETCH
SET:error
reducer:reduceError
Endpoint.errorPolicy()
filterOptimistic
reducer:FETCH
SET
Endpoint.update()
normalize
Endpoint.?getOptimisticResponse()
managers
rejects
endpoint(...args)
NetworkManager
Controller.resolve(error)
dispatch(SET)
Controller.fetch
dispatch(FETCH)
Endpoint.key(...args)

Entity​

Controller.setResponse
processedEntity
Entity.normalize
Entity.pk()
Entity.process()
Entity.validate()
normalize(this.schema)
addEntity
Entity.mergeWithStore()
Entity.expiresAt()
Entity.merge()
Controller.getResponse
Entity.pk()
Entity.infer()
Entity.createIfValid
Entity.fromJS()
Entity.validate()
Entity.denormalize