Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Issue with refetchQueries in the Apollo Client useMutation hook

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
            }
        }
    }
`;
like image 663
Paul van den Dool Avatar asked Dec 30 '22 13:12

Paul van den Dool


1 Answers

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.

like image 96
Paul van den Dool Avatar answered Apr 25 '23 10:04

Paul van den Dool