Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Apollo client with id default not found #1506

Open
sschneider-ihre-pvs opened this issue Aug 28, 2023 · 2 comments
Open

Apollo client with id default not found #1506

sschneider-ihre-pvs opened this issue Aug 28, 2023 · 2 comments

Comments

@sschneider-ihre-pvs
Copy link

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
Copy link
Contributor

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
Copy link

OctaneInteractive commented May 8, 2024

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants