Merge pull request #25 from guendev/fix-use-fragment

Update `useFragment` to handle nullish values and example refinement

Author: guendev

.changeset/hot-adults-invite.md

@@ -0,0 +1,6 @@
+---
+"@vue3-apollo/core": patch
+"@vue3-apollo/nuxt": patch
+---
+
+fix(core): update `useFragment` to handle nullish `from` values and refine strict fragment usage example

packages/core/src/composables/useFragment.ts

@@ -41,7 +41,7 @@ export type UseFragmentOptions<TData = unknown, TVariables extends OperationVari
      * from: 'User:123'
      * ```
      */
-    from: MaybeRefOrGetter<FragmentType<NoInfer<TData>> | Reference | StoreObject | string>
+    from?: MaybeRefOrGetter<FragmentType<NoInfer<TData>> | null | Reference | StoreObject | string | undefined>
 
     /**
      * GraphQL fragment document.
@@ -165,6 +165,10 @@ export function useFragment<TData = unknown, TVariables extends OperationVariabl
             return fromValue
         }
 
+        if (!fromValue) {
+            return fromValue
+        }
+
         return cache.value.identify(fromValue)
     })
 
@@ -361,24 +365,20 @@ export function useFragment<TData = unknown, TVariables extends OperationVariabl
          * @example
          * Create a helper for complete data access:
          * ```ts
-         * // composables/useCompleteFragment.ts
+         * // composables/useStrictFragment.ts
          * import type { OperationVariables } from '@apollo/client'
          * import type { UseFragmentOptions } from '@vue3-apollo/core'
          *
-         * export function useCompleteFragment<TData = unknown, TVariables extends OperationVariables = OperationVariables>(options: UseFragmentOptions<TData, TVariables>) {
+         * export function useStrictFragment<TData = unknown, TVariables extends OperationVariables = OperationVariables>(options: UseFragmentOptions<TData, TVariables>) {
          *     const fragment = useFragment(options)
-         *     const fullData = computed(() =>
-         *         fragment.result.value?.complete
-         *             ? fragment.result.value.data
-         *             : undefined
-         *     )
-         *     return { ...fragment, fullData }
+         *     const data = computed(() => fragment.result.value.data as TData)
+         *     return { ...fragment, data }
          * }
          *
          * // Usage
-         * const { fullData } = useCompleteFragment(options)
-         * if (fullData.value) {
-         *   console.log(fullData.value.name) // No optional chaining needed
+         * const { data } = useStrictFragment(options)
+         * if (data.value) {
+         *   console.log(data.value.name) // No optional chaining needed
          * }
          * ```
          */