Skip to content

Requests

Interfaces

Visit()

Defined in: types/requests.ts:12

Visit(input: string, options: VisitProps): Promise\<VisitResult>

Defined in: types/requests.ts:31

Use visit to make single page transitions from one page. The function is a wrapper around fetch and made to mimic a link click or a form submision. When used, a json request will be made for the next page, then Superglue saves the response, swap the page component, and change the browser history.

Note

There can be only one visit at a time. If another visit is called from elsewhere, the previous visit would be aborted.

You must provide the implentation and pass it back to Superglue in application.js. Superglue will then pass it to your page components and use it for UJS navigation. This is usually generated for you in application_visit.js where you can customize its behavior globally.

Parameters

Parameter Type Description
input string The first argument to Fetch
options VisitProps

Returns

Promise\<VisitResult>


VisitProps

Defined in: types/requests.ts:39

Options for Visit

Extends

  • Omit\<BaseProps, "signal">

Properties

Property Type Description Inherited from Defined in
placeholderKey? string Defaults to the currentPageKey. When present, Superglue will use the page state located at that pageKey and optimistally navigates to it as the next page's state while the requests resolves. - types/requests.ts:45
revisit? boolean When true and the request method is a GET, changes the suggestionAction of the Result object to none so that Superglue does nothing to window.history. When the GET response was redirected, changes navigationAction to replace - types/requests.ts:52
method? string The HTTP method RemoteProps.method types/requests.ts:77
body? BodyInit The HTTP body RemoteProps.body types/requests.ts:79
headers? {[key: string]: string; } The HTTP headers Omit.headers types/requests.ts:81
beforeSave? BeforeSave\<JSONMappable> - RemoteProps.beforeSave types/requests.ts:84

Remote()

Defined in: types/requests.ts:55

Remote(input: string, options: RemoteProps): Promise\<Result>

Defined in: types/requests.ts:69

Remote is a wrapper around fetch. It's used to make a request and mutate the store. Remote does not navigate, and it does not change the browser history. There can be multiple Remote requests running concurrently.

This function is to be wrapped by a developer as a ApplicationRemote and returned to superglue. This is usually generated as application_visit.js where you can make minimum edits to affect its global usage.

Parameters

Parameter Type Description
input string The first argument to Fetch
options RemoteProps The fetch RequestInit with additional options

Returns

Promise\<Result>


RemoteProps

Defined in: types/requests.ts:90

Options for Visit

Extends

  • BaseProps

Properties

Property Type Description Inherited from Defined in
method? string The HTTP method BaseProps.method types/requests.ts:77
body? BodyInit The HTTP body BaseProps.body types/requests.ts:79
headers? {[key: string]: string; } The HTTP headers BaseProps.headers types/requests.ts:81
beforeSave? BeforeSave\<JSONMappable> - BaseProps.beforeSave types/requests.ts:84
pageKey? string Specifies where to store the remote payload, if not provided Remote will derive a key from the response's url. - types/requests.ts:95
force? boolean By default, remote Remote disallows grafting a page response using props_at if the target pageKey provided has a different componentIdentifier. Setting force: true will ignore this limitation. This can be useful if you are absolutely sure that the page your grafting onto has a compatible shape with the response received with using props_at. A good example of this is a shared global header. - types/requests.ts:105

BeforeSave()\<T>

Defined in: types/requests.ts:108

Type Parameters

Type Parameter Default type
T JSONMappable

BeforeSave\<U>(prevPage: undefined | Page\<T>, nextPage: U): U

Defined in: types/requests.ts:133

A callback that fires in between recieving a payload and saving a payload. Use this callback to modify the payload before it gets saved. Its useful for appending, prepending, shuffeling, etc. recieved data to existing data.

prevPage is undefined when there is no existing page in the store (e.g. on a first visit).

const beforeSave = (prevPage, nextPage) => {
  const prevMessages = prevPage?.data?.messages ?? []
  nextPage.data.messages = [
    ...prevMessages,
    ...nextPage.data.messages
  ]

  return nextPage
}

remote("/posts", {beforeSave})

Type Parameters

Type Parameter
U extends SaveResponse\<T> | GraftResponse\<T>

Parameters

Parameter Type
prevPage undefined | Page\<T>
nextPage U

Returns

U


ApplicationRemote()

Defined in: types/requests.ts:139

ApplicationRemote(input: string, options?: RemoteProps & { dataset?: {[name: string]: undefined | string; }; }): Promise\<Result | ErrorResult>

Defined in: types/requests.ts:156

ApplicationRemote is the developer provided wrapper around Remote.

It contains custom functionality, but is bound by the interface that Superglue uses to make a remote call. See Remote for more details.

The only difference between the two interfaces is ApplicationRemote will also be passed a dataset as an option. This is because Superglue UJS uses ApplicationRemote and will pass the dataset of the HTML element where UJS is enabled on.

Returns a Promise<Result | ErrorResult> — terminal branches (HTTP error redirects, unexpected exceptions) should return a never-settling promise rather than undefined so the chain reflects "the browser is unloading."

Parameters

Parameter Type
input string
options? RemoteProps & { dataset?: {[name: string]: undefined | string; }; }

Returns

Promise\<Result | ErrorResult>


ApplicationVisit()

Defined in: types/requests.ts:166

ApplicationVisit(input: string, options?: VisitProps & { dataset?: {[name: string]: undefined | string; }; }): Promise\<VisitResult | ErrorResult>

Defined in: types/requests.ts:183

ApplicationVisit is the developer provided wrapper around Remote.

It contains custom functionality, but is bound by the interface that Superglue uses to make a visit call. See Remote for more details.

The only difference between the two interfaces is ApplicationVisit will also be passed a dataset as an option. This is because Superglue UJS uses ApplicationVisit and will pass the dataset of the HTML element where UJS is enabled on.

Returns a Promise<VisitResult | ErrorResult> — terminal branches (HTTP error redirects, unexpected exceptions) should return a never-settling promise rather than undefined so the chain reflects "the browser is unloading."

Parameters

Parameter Type
input string
options? VisitProps & { dataset?: {[name: string]: undefined | string; }; }

Returns

Promise\<VisitResult | ErrorResult>