T
TanStack•4y ago
exotic-emerald

queryClient.invalidateQueries failed. help neeeded

const addProject = async (...) => {
  const { data, error } = await supabase.rpc('create_project', {xxxx})
  if (error) {
    throw new Error(error.message)
  }
  return data
}

export function useAddProject() {
  const queryClient = useQueryClient()
  return useMutation(
    ({... }) => addProject({ ...}),
    {
      onMutate: async (...) => {
        await queryClient.cancelQueries(['list'])
        const previous = queryClient.getQueryData<Array<ProjectMetaData>>(['list'])

        if (previous) {
          queryClient.setQueryData<Array<ProjectMetaData>>(
            ['list'],
            [
              {
                id: 'temp',
                     },
              ...previous,
            ]
          )
        }
        return { previous }
      },
      onError: (err, variables, context) => {
        if (context?.previous) {
          queryClient.setQueryData(['list'], context.previous)
        }
      },
      onSettled: (data) => {
        queryClient.invalidateQueries(['list'])
        queryClient.invalidateQueries()
        console.log('data from server', data)
      },
    }
  )
}
const addProject = async (...) => {
  const { data, error } = await supabase.rpc('create_project', {xxxx})
  if (error) {
    throw new Error(error.message)
  }
  return data
}

export function useAddProject() {
  const queryClient = useQueryClient()
  return useMutation(
    ({... }) => addProject({ ...}),
    {
      onMutate: async (...) => {
        await queryClient.cancelQueries(['list'])
        const previous = queryClient.getQueryData<Array<ProjectMetaData>>(['list'])

        if (previous) {
          queryClient.setQueryData<Array<ProjectMetaData>>(
            ['list'],
            [
              {
                id: 'temp',
                     },
              ...previous,
            ]
          )
        }
        return { previous }
      },
      onError: (err, variables, context) => {
        if (context?.previous) {
          queryClient.setQueryData(['list'], context.previous)
        }
      },
      onSettled: (data) => {
        queryClient.invalidateQueries(['list'])
        queryClient.invalidateQueries()
        console.log('data from server', data)
      },
    }
  )
}
this mutation would run successfully, I can see the new data from the log. but the cache 'list' is not being invalidated. It just won't re fetch. queryClient.invalidateQueries() which supposes to invalidate all cache did not work neither. I spent a day on this and it is very frustrating. please help me out here . thank you.
1 Reply
exotic-emerald
exotic-emeraldOP•4y ago
const fetchProjectList = async () => {
  const { data, error } = await supabase
    .from<ProjectMetaData>('projects')
    .select('id, title, description, created_at, updated_at, is_layered')
    .order('updated_at', { ascending: true })
  if (error) {
    throw new Error(error.message)
  }
  return data
}

export function useProjectList() {
  return useQuery(['list'], () => fetchProjectList())
}
const fetchProjectList = async () => {
  const { data, error } = await supabase
    .from<ProjectMetaData>('projects')
    .select('id, title, description, created_at, updated_at, is_layered')
    .order('updated_at', { ascending: true })
  if (error) {
    throw new Error(error.message)
  }
  return data
}

export function useProjectList() {
  return useQuery(['list'], () => fetchProjectList())
}
this is the fetchProject List fn. the solution is 
queryClient.refetchQueries(['list'])
 
queryClient.refetchQueries(['list'])
since the cache is not used by any component, invalidate won't refetch immediately

Did you find this page helpful?