Usage examples

[Tharshan Muthulingam]

Hi there,

Are there any examples of usage of how to use this with redwood cells and components? Examples of queries and mutations would be great.

I am looking into the switch from Apollo to React Query so want to see how much effort it is.

[Marcelo Alves]

@viperfx Sorry I missed this!

After setting up the providers (QueryClientProvider / RedwoodReactQueryProvider), cells work the exact same way as before. When the component is mounted, the query is called from the cell and data returned in the Success function. Mutations are the same but I like to grab the queryClient from react-query and expire the cache

import { useMutation } from '@redwoodjs/web'
import { useQueryClient } from 'react-query'

const SOME_MUTATION = gql`
  mutation CreateSomeMutation($input: CreateSomeMutationInput!){
    createSomething(input: $input) {
      id
    }
  }
`

const NewThing = () => {
  const queryClient = useQueryClient()

  const [createThing, { loading, error }] = useMutation(SOME_MUTATION, {
    onSuccess: () => {
      queryClient.refetchQueriest('THING')
    }
  }

  const onSave = (input) => {
    createThing({ variables: { input })
  }
}

Hope this helps! Most of the usage remains unchanged from redwood