Open sschneider-ihre-pvs opened 1 year ago
I have next composable and many others here working example
import { provideApolloClient } from '@vue/apollo-composable'
import { apolloDefaultClient } from '@/modules/shared/plugins/apollo/vue-apollo'
import NotificationRead from '../graphql/mutations/notificationRead.gql'
import { toRawRecursive } from '@/modules/home/utils'
import { Notifications } from '@/modules/shared/plugins/apollo/schemaTypesGenerated'
import { DocumentNode } from 'graphql/index'
import { TypedDocumentNode } from '@graphql-typed-document-node/core'
import GetMyNotificationsTotalUnread from '@/modules/notifications/graphql/queries/getMyNotificationsTotalUnread.gql'
provideApolloClient(apolloDefaultClient)
const defaultClient = useApolloClient('default').client
// clientId: 'public'
const { mutate, loading, onError, onDone } = useMutation(NotificationRead)
export default function useMutationNotificationRead() {
const notificationRead = (uuid: string, query: DocumentNode | TypedDocumentNode, variables: object) => {
mutate(
{ uuid },
{
update: () => {
const rawVariables = toRawRecursive(variables)
const apolloCachedData = defaultClient.cache.readQuery({ query, variables: rawVariables })
if (!apolloCachedData) return
const data = JSON.parse(JSON.stringify(apolloCachedData.myNotifications.data))
const newData = {
myNotifications: {
...apolloCachedData.myNotifications,
data: data.map((myNotification: Notifications) => {
return myNotification.uuid === uuid ? { ...myNotification, read_at: dayjs().toISOString() } : myNotification
}),
},
}
defaultClient.cache.writeQuery({ query: query, variables: rawVariables, data: newData })
// reset counter for query myUnreadTotalNotifications
const apolloCachedUnreadTotal = defaultClient.cache.readQuery({ query: GetMyNotificationsTotalUnread })
if (!apolloCachedUnreadTotal) return
const newUnreadNotification = {
myUnreadTotalNotifications: {
// @ts-expect-error property exist
...apolloCachedUnreadTotal.myUnreadTotalNotifications,
// @ts-expect-error property exist
total: apolloCachedUnreadTotal.myUnreadTotalNotifications.total - 1,
},
}
defaultClient.cache.writeQuery({ query: GetMyNotificationsTotalUnread, data: newUnreadNotification })
},
},
)
}
return { notificationRead, loading, onError, onDone }
}
Hi, I'm in the process of migrating to Vue Apollo 4 and it's proving to be an insurmountable ordeal.
Are there any actual simple working examples out there?
Describe the bug When I try to use the apollo client that vue uses outside of a component and also use
provideApolloClient
I get the errorApollo client with id default not found. use ProvideApolloClient() if you are outside of a compnent setup
To Reproduce
Expected behavior if
provideApolloClient
is called with the actual client, it should be found.Versions vue: 3.3.4 @vue/apollo-composable: ^4.0.0-beta.8 @apollo/client: 3.7.17
Additional context Add any other context about the problem here.