admin管理员组

文章数量:1318988

I have useQuery and useMutation from react-apollo-hooks back to back. I want to be able to use the returned values from useQuery as variables for useMutation. Currently, the values from useQuery isn't returned in time for the variables, causing the variables to be undefined.

const { data, error, loading } = useQuery(GET_POSTS, { 
    variables: {
        id: props.match.params.id
    }
})
const item = props.match.params.id
const owner = data.posts[0].author.id
const variables = { item , owner, startDate, endDate }
const bookItem = useMutation(CREATE_BOOKING_MUTATION, variables)

The variable data.posts[0].author.id shows undefined. How do I make sure that the returned value is defined in time?

I have useQuery and useMutation from react-apollo-hooks back to back. I want to be able to use the returned values from useQuery as variables for useMutation. Currently, the values from useQuery isn't returned in time for the variables, causing the variables to be undefined.

const { data, error, loading } = useQuery(GET_POSTS, { 
    variables: {
        id: props.match.params.id
    }
})
const item = props.match.params.id
const owner = data.posts[0].author.id
const variables = { item , owner, startDate, endDate }
const bookItem = useMutation(CREATE_BOOKING_MUTATION, variables)

The variable data.posts[0].author.id shows undefined. How do I make sure that the returned value is defined in time?

• javascript
• reactjs
• graphql
• react-apollo
• react-hooks

Share Improve this question Follow asked May 19, 2019 at 4:52 KevvvKevvv 4,0231212 gold badges5252 silver badges105105 bronze badges 2

• If you can query that data from the back-end wouldn't you already have that data to use in the resolver for the mutation? – dijonkitchen Commented Aug 26, 2021 at 21:14
• react suckz..... – luca.p.alexandru Commented Apr 7, 2023 at 16:14

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

How do I make sure that the returned value is defined in time?

You can simply check condition after useQuery block

---

UPDATE

Hooks can't be called conditionally.

Usual advice is to place condition in useEffect:

const { data, error, loading } = useQuery(GET_POSTS, { 
  variables: {
    id: props.match.params.id
  }
})
const item = props.match.params.id

// data.posts can be undefined at start
const owner = loading ? null : data.posts[0].author.id
const variables = { item , owner, startDate, endDate }
const bookItem = useMutation(CREATE_BOOKING_MUTATION, variables)
useEffect(() => {
  if(!loading) {
    bookItem(); // called when data ready
  }
})

Another option: useApolloClient:

• useQuery to load data needed in mutation

• const client = useApolloClient();

• useEffect - conditionally (!loading or data not empty) use client.mutate() with fetched (in query) data as variables;

Custom hook can be done with 3 parameters: (query, mutation, { mapDataToVariables })

useMutation when the useQuery is pleted like this:

const bookItem = useMutation(CREATE_BOOKING_MUTATION,{
variables:{//your variables},
// to refrech your query after you create mutation
refetchQueries: [
    {
      query: GET_POSTS,
      awaitRefetchQueries: true,
    },
  ]} );   
const { data, error, loading } = useQuery(GET_POSTS, { 
 variables: {
   id: props.match.params.id
  },
    //useMutation when the useQuery is pleted
   onCompleted: () => {
   bookItem();
},

})

I think you can pass the variables when you actually call the mutation instead, something like:

...
const bookItem = useMutation(CREATE_BOOKING_MUTATION)
...
if(!loading && !error && data) {
  bookItem({
    variables: {
      owner: data.posts[0].author.id,
      ...
    }
  })
}

本文标签： javascriptHow do I chain useQuery and useMutation in GraphQL properlyStack Overflow