Using Mutations

Mutations are called directly, like a regular asynchronous function.

import updateProject from 'app/projects/mutations/updateProject'
function (props) {
  return (
    <Formik
      onSubmit={async values => {
        try {
          const project = await updateProject(values)
        } catch (error) {
          alert('Error saving project')
        }
      }}>
      {/* ... */}
    </Formik>
  )
}

Error Handling

Any errors thrown from your server code will be thrown on the client exactly like you'd expect. So you can use

Cache Invalidation

mutate

• useQuery returns a mutate function you can use to manually update the cache
• Calling mutate will automatically trigger a refetch for the initial query to ensure it has the correct data

export default function (props: {query: {id: number}}) {
  const [product, {mutate}] = useQuery(getProduct, {where: {id: props.query.id}})
  return (
    <Formik
      initialValues={product}
      onSubmit={async (values) => {
        try {
          const product = await updateProduct(values)
          mutate(product)
        } catch (error) {
          alert("Error saving product")
        }
      }}>
      {/* ... */}
    </Formik>
  )
}

refetch

• useQuery returns a refetch function you can use to trigger a query reload

export default function (props) {
  const [product, {refetch}] = useQuery(getProduct, {where: {id: props.id}})
  return (
    <Formik
      initialValues={product}
      onSubmit={async (values) => {
        try {
          const product = await updateProduct(values)
          refetch()
        } catch (error) {
          alert("Error saving product")
        }
      }}>
      {/* ... */}
    </Formik>
  )
}

Automatically

We want to somehow automatically invalidate your query cache. We're not sure how to do this yet, but we have