Dependent Query Collection + Direct write

[SSam0419]

Say i have a query collection that fetch data by user email, and a useMutation to optimistic update it, the optimistic always failed as the collection is always not ready. How do we handle dependent query collections?

// collection.ts
export const itemsCollection = ({
  userEmail,
  slug,
}: {
  userEmail: string | null
  slug: string
}) =>
  createCollection(
    queryCollectionOptions({
      queryKey: () => [slug, userEmail, 'items'],
      queryFn: () => {
        const client = getApiClient(slug) 
        return client.items.list({ userEmail })
      },
      getKey: (item) => item.id,
      queryClient: getContext().queryClient,
      onInsert: async () => {
        return { refetch: false }
      },
      onUpdate: async () => {
        return { refetch: false }
      },
      onDelete: async () => {
        return { refetch: false }
      },
      enabled: !!userEmail,
    }),
  )

// mutation.ts
export const useCreateItem = ({
  userEmail,
  slug
}) => {
  return useMutation({
    mutationKey: ['create-item'],
    mutationFn: () => {
      return fetch('/api/items', {
        method: 'POST',
        // ....
      })
    },
    onSuccess: (data) => {
      const collection = itemsCollection({
        userEmail: userEmail,
        slug: slug,
      })
      if (collection && collection.isReady()) {
        collection.utils.writeInsert(data)
      }
    },
  })
}