vuejs / apollo

🚀 Apollo/GraphQL integration for VueJS
http://apollo.vuejs.org
MIT License
6.03k stars 522 forks source link

Apollo client with id default not found #1506

Open sschneider-ihre-pvs opened 1 year ago

sschneider-ihre-pvs commented 1 year ago

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 error Apollo client with id default not found. use ProvideApolloClient() if you are outside of a compnent setup

To Reproduce

const client = provideApolloClient(apolloClient);
function something() {
  const { result } = client(() => useGraphQLGeneratorQuery());
  ....

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.

websitevirtuoso commented 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 }
}
OctaneInteractive commented 6 months ago

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?