Completed test for useLinkQuery

packages/connected/src/linkTraversal/exploreLinks.ts

@@ -28,10 +28,12 @@ export async function exploreLinks<
   options?: ExploreLinksOptions<Plugins>,
 ): Promise<void> {
   // Do an initial check of the resources.
+  console.log("Performing read for", startingResource.uri);
   const readResult = options?.shouldRefreshResources
     ? await startingResource.read()
     : await startingResource.readIfUnfetched();
   if (readResult.isError) return;
+  console.log("Completed read for", startingResource.uri);
 
   if (options?.onResourceEncountered)
     await options?.onResourceEncountered(startingResource);
@@ -77,6 +79,7 @@ export async function exploreLinksRecursive<
   );
   const resourceToFetch = dataset.getResource(ldObject["@id"]);
   if (shouldFetch) {
+    console.log("Performing Read for", resourceToFetch.uri);
     const readResult = options?.shouldRefreshResources
       ? await resourceToFetch.read()
       : await resourceToFetch.readIfUnfetched();
@@ -84,6 +87,7 @@ export async function exploreLinksRecursive<
     if (readResult.isError) {
       return;
     }
+    console.log("Completed Read for", resourceToFetch.uri);
   }
   if (!encounteredDuringThisExploration.has(resourceToFetch.uri)) {
     encounteredDuringThisExploration.add(resourceToFetch.uri);

packages/react/src/methods/useLinkQuery.ts

@@ -49,6 +49,10 @@ export function createUseLinkQuery<Plugins extends ConnectedPlugin[]>(
         .startLinkQuery(resource, startingSubject, linkQuery);
 
       linkQueryRef.current.subscribe().then(() => setIsLoading(false));
+
+      return () => {
+        linkQueryRef.current?.unsubscribeAll();
+      };
     }, [shapeType, startingResource, startingSubject, linkQuery]);
 
     const fromSubject = useCallback(

packages/solid-react/test/Solid-Integration.test.tsx

@@ -2,10 +2,14 @@ import React, { useCallback, useEffect, useState } from "react";
 import type { FunctionComponent } from "react";
 import { render, screen, fireEvent, act } from "@testing-library/react";
 import {
+  MAIN_PROFILE_SUBJECT,
+  MAIN_PROFILE_URI,
+  OTHER_PROFILE_URI,
   SAMPLE_BINARY_URI,
   SAMPLE_DATA_URI,
   SERVER_DOMAIN,
   setUpServer,
+  THIRD_PROFILE_SUBJECT,
 } from "./setUpServer";
 import { UnauthenticatedSolidLdoProvider } from "../src/UnauthenticatedSolidLdoProvider";
 import {
@@ -17,9 +21,13 @@ import {
   useRootContainerFor,
   useSubject,
   useSubscribeToResource,
+  useLinkQuery,
 } from "../src";
 import { PostShShapeType } from "./.ldo/post.shapeTypes";
 import type { PostSh } from "./.ldo/post.typings";
+import { SolidProfileShapeShapeType } from "./.ldo/solidProfile.shapeTypes";
+import { changeData, commitData } from "@ldo/connected";
+import type { SolidProfileShape } from "./.ldo/solidProfile.typings";
 
 // Use an increased timeout, since the CSS server takes too much setup time.
 jest.setTimeout(40_000);
@@ -650,4 +658,91 @@ describe("Integration Tests", () => {
       unmount();
     });
   });
+
+  /**
+   * ===========================================================================
+   * useLinkQuery
+   * ===========================================================================
+   */
+  describe("useLinkQuery", () => {
+    const linkQuery = {
+      name: true,
+      knows: {
+        name: true,
+      },
+    } as const;
+
+    it("Fetches a resource using useLinkQuery", async () => {
+      const UseLinkQueryTest: FunctionComponent = () => {
+        const profile = useLinkQuery(
+          SolidProfileShapeShapeType,
+          MAIN_PROFILE_URI,
+          MAIN_PROFILE_SUBJECT,
+          linkQuery,
+        );
+        const addProfile = useCallback(async () => {
+          const cProfile = changeData(
+            profile as SolidProfileShape,
+            dataset.getResource(MAIN_PROFILE_URI),
+          );
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          cProfile.knows?.add({ "@id": THIRD_PROFILE_SUBJECT });
+          await commitData(cProfile);
+        }, [profile]);
+        if (!profile) return <p>Loading</p>;
+        return (
+          <div>
+            <p role="profile-name">{profile.name}</p>
+            <ul role="list">
+              {profile.knows?.map((nestedProfile) => (
+                <li key={nestedProfile["@id"]}>{nestedProfile.name}</li>
+              ))}
+            </ul>
+            <button role="add-profile" onClick={addProfile}>
+              Add Profile
+            </button>
+          </div>
+        );
+      };
+      const { unmount } = render(
+        <UnauthenticatedSolidLdoProvider>
+          <UseLinkQueryTest />
+        </UnauthenticatedSolidLdoProvider>,
+      );
+      await screen.findByText("Loading");
+
+      let profileNameElement = await screen.findByRole("profile-name");
+
+      const resource = dataset.getResource(MAIN_PROFILE_URI);
+      console.log(resource.status);
+      const resource2 = dataset.getResource(OTHER_PROFILE_URI);
+      console.log(resource2.status);
+
+      expect(profileNameElement.textContent).toBe("Main User");
+
+      let list = await screen.findByRole("list");
+      expect(list.children[0].innerHTML).toBe("Other User");
+      expect(list.children.length).toBe(1);
+
+      // Click button to add a publisher
+      await fireEvent.click(screen.getByText("Add Profile"));
+
+      // Give some time for notifications to propogate
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+      });
+
+      profileNameElement = await screen.findByRole("profile-name");
+      expect(profileNameElement.textContent).toBe("Main User");
+
+      list = await screen.findByRole("list");
+      expect(list.children[0].innerHTML).toBe("Other User");
+      expect(list.children[1].innerHTML).toBe("Third User");
+
+      expect(list.children.length).toBe(2);
+
+      unmount();
+    });
+  });
 });

packages/solid-react/test/setUpServer.ts

@@ -20,6 +20,20 @@ export const SAMPLE2_BINARY_URI =
   `${TEST_CONTAINER_URI}${SAMPLE2_BINARY_SLUG}` as SolidLeafUri;
 export const SAMPLE_CONTAINER_URI =
   `${TEST_CONTAINER_URI}sample_container/` as SolidContainerUri;
+export const LINK_QUERY_CONTAINER = `${ROOT_CONTAINER}link-query/`;
+export const MAIN_PROFILE_URI =
+  `${LINK_QUERY_CONTAINER}main-profile.ttl` as SolidContainerUri;
+export const MAIN_PROFILE_SUBJECT =
+  `${MAIN_PROFILE_URI}#me` as SolidContainerUri;
+export const OTHER_PROFILE_URI =
+  `${LINK_QUERY_CONTAINER}other-profile.ttl` as SolidContainerUri;
+export const OTHER_PROFILE_SUBJECT =
+  `${OTHER_PROFILE_URI}#me` as SolidContainerUri;
+export const THIRD_PROFILE_URI =
+  `${LINK_QUERY_CONTAINER}third-profile.ttl` as SolidContainerUri;
+export const THIRD_PROFILE_SUBJECT =
+  `${THIRD_PROFILE_URI}#me` as SolidContainerUri;
+
 export const EXAMPLE_POST_TTL = `@prefix schema: <http://schema.org/> .
 
 <#Post1>

packages/solid-react/test/test-server/configs/template/wac/link-query/main-profile.ttl

@@ -4,4 +4,4 @@
 :me a foaf:Person ;
     foaf:name "Main User" ;
     foaf:mbox <mailto:main@example.org> ;
-    foaf:knows <http://localhost:3005/test-container/otherProfile.ttl#me> .
+    foaf:knows <http://localhost:3002/example/link-query/other-profile.ttl#me> .

packages/solid-react/test/test-server/configs/template/wac/link-query/other-profile.ttl

@@ -4,4 +4,4 @@
 :me a foaf:Person ;
     foaf:name "Other User" ;
     foaf:mbox <mailto:other@example.org> ;
-    foaf:knows <http://localhost:3005/test-container/mainProfile.ttl#me> .
+    foaf:knows <http://localhost:3002/example/link-query/main-profile.ttl#me> .

packages/solid-react/test/test-server/configs/template/wac/link-query/third-profile.ttl

@@ -4,4 +4,4 @@
 :me a foaf:Person ;
     foaf:name "Third User" ;
     foaf:mbox <mailto:third@example.org> ;
-    foaf:knows <http://localhost:3005/test-container/mainProfile.ttl#me> .
+    foaf:knows <http://localhost:3002/example/link-query/main-profile.ttl#me> .