Reactive Control Flow

WarpDrive offers both a JavaScript API and a Component API for working with requests. Both APIs offer a clean way of working with asynchronous data via reactive values and states instead of needing to switch into imperative code or async/await. This approach enables enables automatic cleanup when components dismount, unlocking Intelligent Lifecycle Management

With the component API, any builder function can be used to produce the query the <Request /> component should make.

Ember

import { Request } from '@warp-drive/ember';
import { findRecord } from '@warp-drive/utilities/json-api';
import { Spinner } from './spinner';

export default <template>
  <Request @query={{findRecord "user" @userId}}> 
    <:content as |result|>
      Hello {{result.data.name}}!
    </:content>

    <:loading><Spinner /></:loading>

    <:error as |error state|>
      <div>
        <p>Error: {{error.message}}</p>
        <p><button onClick={{state.retry}}>Try Again?</button></p>
      </div>
    </:error>
  </Request> 
</template>

React

import { Request } from '@warp-drive/ember';
import { findRecord } from '@warp-drive/utilities/json-api';
import { Spinner } from './spinner';

export function UserPreview($props) {
  return <Request
    query={findRecord('user', $props.userId)} 
    states={{
      content: ({ result, features }) => (  
        <>Hello {{result.data.name}}!</>
      ),
      loading: () => <Spinner />,
      error: ({ error, features }) => (
        <div>
          <p>Error: {error.message}</p>
          <p><button onClick={features.retry}>Try Again?</button></p>
        </div>
      ),
    }}
  />  
}

Svelte

Coming Soon!

Vue

Coming Soon!