fix: ensure client.fetch remains bound to instance on server (#994)

playground/pages/fetch-from-server.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>{{ movies }}</div>
+</template>
+
+<script setup lang="ts">
+const { data: movies } = await useFetch('/api/groq')
+</script>

playground/server/api/fetch.ts

@@ -0,0 +1,10 @@
+export default defineEventHandler(() => {
+  const sanity = useSanity()
+
+  const query = groq`*[_type == "movie" && slug.current == "walle"][0] {
+        title,
+        "poster": poster.asset._ref,
+        "slug": slug.current
+      }`
+  return sanity.fetch(query)
+})

src/runtime/server/utils/index.ts

@@ -16,7 +16,7 @@ const createSanityHelper = (options: ClientConfig): SanityHelper => {
   return {
     client,
     config,
-    fetch: client.fetch,
+    fetch: client.fetch.bind(client),
     setToken(token) {
       config.token = token
       client = createClient(config)

test/e2e/ssr.behaviour.ts

@@ -16,6 +16,7 @@ export const ssrBehaviour = () => {
 
   it('auto-imports work in server routes', async () => {
     expect(await $fetch('/api/groq')).toContain('hey there')
+    expect(await $fetch('/api/fetch')).toEqual(expect.objectContaining({ slug: 'walle' }))
     expect(await $fetch('/api/client')).toEqual(expect.objectContaining({
       projectId: 'j1o4tmjp',
     }))