fix: <Img/> correctly suspends

Author: ntucker

.changeset/violet-schools-own.md

@@ -0,0 +1,5 @@
+---
+'@data-client/img': patch
+---
+
+Fix <Img/> correctly suspends

packages/img/src/__tests__/Img.web.tsx

@@ -1,4 +1,4 @@
-import { CacheProvider } from '@data-client/react';
+import { DataProvider } from '@data-client/react';
 import { getByTestId, render, waitFor } from '@testing-library/react';
 import React, { Suspense } from 'react';
 
@@ -22,18 +22,18 @@ describe('<Img />', () => {
 
   it('suspends then resolves', async () => {
     const tree = (
-      <CacheProvider>
+      <DataProvider>
         <Suspense fallback="loading">
           <Img src="http://test.com/myimage.png" alt="myimage" />
         </Suspense>
-      </CacheProvider>
+      </DataProvider>
     );
     const { queryByText, getByAltText } = render(tree);
-    expect(queryByText('loading')).toBeDefined();
+    expect(queryByText('loading')).not.toBeNull();
 
     imgs.forEach(img => img.onload?.(new Event('img load')));
 
-    await waitFor(() => expect(getByAltText('myimage')).toBeDefined());
+    await waitFor(() => expect(getByAltText('myimage')).not.toBeNull());
   });
 
   it('suspends then resolves with custom component', async () => {
@@ -66,50 +66,50 @@ describe('<Img />', () => {
       <Img component={MyComponent} size="large" />;
     };
     const tree = (
-      <CacheProvider>
+      <DataProvider>
         <Suspense fallback="loading">
           <Img
             component={MyComponent}
             src="http://test.com/myimage.png"
             size="large"
           />
         </Suspense>
-      </CacheProvider>
+      </DataProvider>
     );
     const { queryByText, getByTestId } = render(tree);
-    expect(queryByText('loading')).toBeDefined();
+    expect(queryByText('loading')).not.toBeNull();
 
     imgs.forEach(img => img.onload?.(new Event('img load')));
 
-    await waitFor(() => expect(getByTestId('mycomponent')).toBeDefined());
+    await waitFor(() => expect(getByTestId('mycomponent')).not.toBeNull());
   });
 
   it('still resolves even when network request fails', async () => {
     const tree = (
-      <CacheProvider>
+      <DataProvider>
         <Suspense fallback="loading">
           <Img src="http://test.com/myimage.png" alt="myimage" />
         </Suspense>
-      </CacheProvider>
+      </DataProvider>
     );
     const { queryByText, getByAltText } = render(tree);
-    expect(queryByText('loading')).toBeDefined();
+    expect(queryByText('loading')).not.toBeNull();
 
     imgs.forEach(img => img.onerror?.(new Event('img load')));
 
-    await waitFor(() => expect(getByAltText('myimage')).toBeDefined());
+    await waitFor(() => expect(getByAltText('myimage')).not.toBeNull());
   });
 
   it('no suspense and no fetch with no src', async () => {
     const tree = (
-      <CacheProvider>
+      <DataProvider>
         <Suspense fallback="loading">
           <Img alt="myimage" />
         </Suspense>
-      </CacheProvider>
+      </DataProvider>
     );
     const { getByAltText } = render(tree);
 
-    await waitFor(() => expect(getByAltText('myimage')).toBeDefined());
+    await waitFor(() => expect(getByAltText('myimage')).not.toBeNull());
   });
 });

packages/img/src/getImage.ts

@@ -29,7 +29,6 @@ const getImage: EndpointInstance<
     key(this: EndpointInstance, { src }: { src: string }) {
       return `GET ${src}`;
     },
-    schema: '',
   },
 );
 export default getImage;