I'm running into the following error while trying to define refetchQueries
in my useMutation
hook.
Type 'DocumentNode' is not assignable to type 'string | PureQueryOptions'.
Property 'query' is missing in type 'DocumentNode' but required in type 'PureQueryOptions'.
I'm not sure what I'm doing wrong as the official Apollo documentation is a bit unclear on it and I can't find any precedence when Googling.
As I understand the error, the property query
is missing from my GraphQL query. Am I passing the right value to the refetchQueries
? I think I'm doing it correctly, but then I don't know why it's complaining about query
not being part of it.
Code
import { useMutation, useQuery } from '@apollo/client';
import { GET_CUSTOMERS, MARK_AS_VIP } from './queries';
export default function Customers() {
const [ markAsVIP, { data: vips, loading: vipLoading, error: vipError } ] = useMutation( MARK_AS_VIP );
const { loading, error, data: getCustomerResp } = useQuery( GET_CUSTOMERS );
const handleMarkAsVIP = ( customerId: string ) => {
markAsVIP( {
variables: { id: customerId, tags: [ 'VIP' ] },
refetchQueries: [
GET_CUSTOMERS, // error shows here
'getCustomers'
]
} )
}
}
Queries
import { gql } from '@apollo/client';
export const GET_CUSTOMERS = gql`
query getCustomers {
customers( first: 50 ) {
edges {
cursor
node {
id
displayName
tags
}
}
}
}
`;
export const MARK_AS_VIP = gql`
mutation markAsVIP( $id: ID!, $tags: [String!]! ) {
tagsAdd( id: $id, tags: $tags ) {
node {
id
}
userErrors {
field
message
}
}
}
`;
Found the answer myself. Although it doesn't look like anything in the docs, the following worked:
const handleMarkAsVIP = ( customerId: string ) => {
markAsVIP({
variables: { id: customerId, tags: [ 'VIP' ] },
refetchQueries: [
{ query: GET_CUSTOMERS },
'getCustomers'
]
})
}
I figured it said the property query
was missing, so I simply tried passing an object with the query
property, thinking it would never work, but it does.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With