apollo-link-ethereum-mutations-ethersjs
v0.1.9
Published
Allows applications using [Apollo Client](https://www.apollographql.com/docs/tutorial/client.html#apollo-client-setup) to easily transact with the Ethereum blockchain using [Ethers.js](https://github.com/ethers-io/ethers.js/). This package uses [Local St
Downloads
23
Readme
apollo-link-ethereum-mutations-ethersjs
Allows applications using Apollo Client to easily transact with the Ethereum blockchain using Ethers.js. This package uses Local State Management in Apollo Client to manage Ethereum transactions.
Setup
First you must make sure that you're using local state management. If you're using Apollo Boost it's already included. Otherwise, you'll need to integrate apollo-link-state.
You must include the mutation when you setup the client state resolvers:
import { sendTransactionWithOptions } from 'apollo-link-ethereum-mutations-ethersjs'
// ...
const stateLink = withClientState({
resolvers: {
Mutation: {
sendTransaction: sendTransactionWithOptions({
provider: ethersProvider,
abiMapping
})
}
},
cache
})
The sendTransactionWithOptions
function returns a copy of the sendTransaction
function whose options argument is bound to the passed options.
Alternatively, you can wrap the sendTransaction
function yourself:
import { sendTransaction } from 'apollo-link-ethereum-mutations-ethersjs'
const stateLink = withClientState({
resolvers: {
Mutation: {
sendTransaction: async (rootData, variables, context, info) => {
return sendTransaction({
provider: ethersProvider,
abiMapping
}, rootData, variables, context, info)
}
}
},
cache
})
Usage
Once the client state resolver is setup we will be able to call it from a GraphQL mutation. If you have defined the mutation using the name sendTransaction
as above, then you can reuse the included GQL mutation definition in sendTransactionMutation.
Otherwise, you can manually define the mutation:
import gql from 'graphql-tag'
export const sendTransactionMutation = gql`
mutation sendTransactionMutation(
$contractName: String!,
$contractAddress: String,
$method: String!,
$args: Object!
) {
sendTransaction(
contractName: $contractName,
contractAddress: $contractAddress,
method: $method,
args: $args
) @client
}
`
Here is an example of using the mutation in a React component:
import { sendTransactionMutation } from 'apollo-link-ethereum-mutations-ethersjs'
export const TransactionForm = graphql(sendTransactionMutation, { name: 'sendTransaction' })(
class _TransactionForm extends Component {
constructor(props) {
super(props)
this.state = {
transactionId: null
}
}
submit = () => {
if (this.state.transactionId) {
return null // already sent
}
const data = this.props.sendTransaction({
variables: {
contractName: 'ERC20Token',
method: 'approve',
args: ['0x1234', '1000000000000']
}
})
const transactionId = data.sendTransaction.id
this.setState({
transactionId
})
}
render () {
return (
<Form onSubmit={this.submit} />
)
}
}
)
You'll notice that the sendTransaction
function returns the initial transaction object. You can pull the id out so that you can watch the progress of the transaction. The shape of the transaction follows the transaction fragment.
Listings Transactions
To read transactions, you can use the allTransactionsQuery:
import { allTransactionsQuery } from 'apollo-link-etheruem-mutations-ethersjs'
export const TransactionList = graphql(allTransactionsQuery)(
function ({ data }) {
return <React.Fragment>
{this.props.data.transactions.map(tx => <TxRow tx={tx} />)}
</React.Fragment>
}
)