Skip to content

Latest commit

 

History

History
108 lines (70 loc) · 5.65 KB

DOCS.md

File metadata and controls

108 lines (70 loc) · 5.65 KB

API: Transmit

Transmit API is available from the react-transmit or react-transmit-native package:

import Transmit from "react-transmit";  // ES6 imports are awseome!

var Transmit = require("react-transmit");  // Still using require() aye?

Methods

The methods are named after their React / Relay counterparts. Their functionality is mostly the same, but their arguments and/or return types might differ slightly.

createContainer(ReactClass, options) : ReactClass

  • Creates a container that wraps the original ReactClass.
  • The container performs queries and passes query results as props to the original ReactClass.
  • Possible options are the queryParams and the queries definitions.
  • Example usage

render(ReactClass, optionalProps, targetDOMNode) : void

  • For isomorphic apps, client-side.
  • Use it instead of React.render() when you're using Transmit's renderToString() on the server-side.
  • Example usage

renderToString(ReactClass [, optionalProps]) : Promise

  • For isomorphic apps, server-side.
  • Use it on the server to render your React component tree and capture the Transmit query results.
  • Returns a Promise to a the rendered React-string and the captured query results.
  • Tip: catch errors by defining a .catch() handler on the returned Promise.
  • Example usage

injectIntoMarkup(html, data, scripts) : string

  • For isomorphic apps, server-side.
  • If you captured query results on the server with Transmit's renderToString() then you can inject that data into the final markup that's sent to the client. Doing this allows Transmit's render() on the client to re-use the data.
  • This method is actually copied from react-async. Thanks @andreypopp!
  • Example usage

API: Transmit.Container (Higher-order component)

Transmit's createContainer() method describes a new React component, a so-called Higher-order component that wraps the original ReactClass. Like any React component you can pass props to it. Below are the Transmit-specific props. Your own props are just passed onto the original ReactClass.

PropTypes / specifiable props

onQuery(Promise) : function

  • Optional. Pass this callback function to accept a Promise to the query results.
  • Don't use this to call setState(). That's not necessary. Only use it for caching or logging the query results.
  • Tip: catch errors by defining a .catch() handler on the accepted Promise.
  • Example usage

queryParams : object

  • Optional.
  • Overwrites the default queryParams defined with createContainer().

emptyView : ReactElement

  • Optional. The container will render this while the queries are not yet resolved.
  • Defaults to null (React) or <View /> (React Native).

Static Methods

getAllQueries([queryParams [, queryName|queryNames]]) : Promise

  • Performs all queries and returns a composed Promise.
  • Optionally specify a string or string-array to only perform a specific query/queries.
  • Can be used to resolve a component's queries before rendering the component.
  • Example usage

getQuery(queryName [, queryParams]) : Promise

  • Performs a single query and returns its Promise.
  • This is useful to compose a parent query that resolves child components' queries.
  • Example usage

API: Original ReactClass' this.props

Transmit exposes a complemental API to the contained ReactClass via its this.props in the same way Relay does. Don't worry, your own props are also accessible via this.props.

Transmit props

<queryName> : <queryResult>

  • For each declared query the original ReactClass will receive the query result from the container as a prop named exactly like the query.
  • The query results are simply the values resolved from the query's Promise.
  • Example usage

queryParams : object

  • Currently used queryParams, read-only.
  • You can use mutate these values to by calling this.setQueryParams() that will also re-perform the queries.
  • Example usage

Methods

setQueryParams(queryParams [, queryName|queryNames]) : Promise

  • Call this method to perform all queries again with the new queryParams.
  • Optionally specify a string or string-array to only re-perform a specific query/queries.
  • Returns a Promise to the query results. The same Promise that's passed to onQuery().
  • Tip: catch errors by defining a .catch() handler on the returned Promise.
  • Example usage