naystack - v1.5.10
    Preparing search index...

    Function Injector

    • Server component that wraps a client component with server-fetched data using Suspense.

      While the fetch function is resolving, the Component is rendered with loading={true} (and no data). Once the fetch resolves, the Component re-renders with loading={false} and data set to the result.

      This is the primary way to inject server-side data into client components in naystack. Use .authCall() or .call() from your query definitions inside the fetch function.

      Parameters

      • injectorProps: { Component: FC<{ data?: T; loading: boolean } & Y>; fetch: () => Promise<T> } & ComponentProps<
            Y,
        >

        Configuration object.

        • Component: FC<{ data?: T; loading: boolean } & Y>

          React component that receives { data?: T; loading: boolean } plus any extra props.

        • fetch: () => Promise<T>

          Async function that returns the data to pass to the component. Runs on the server.

        • fetch

          Async function that returns the data to pass to the component. Runs on the server.

        • Component

          React component that receives { data?: T; loading: boolean } plus any extra props.

        • props

          Optional. Any additional props to pass to Component. Required if the Component has props other than data and loading.

      Returns Element

      A React element that suspends until fetch() completes, then renders Component with the data.

      import { Injector } from "naystack/graphql/server";
      import getCurrentUser from "@/app/api/(graphql)/User/resolvers/get-current-user";
      import AuthChecker from "./components/auth-checker";

      export default async function Layout({ children }: { children: React.ReactNode }) {
        return (
          <div>
            {children}
            <Injector fetch={getCurrentUser.authCall} Component={AuthChecker} />
          </div>
        );
      }

      import { Injector } from "naystack/graphql/server";
      import getCurrentUser from "@/app/api/(graphql)/User/resolvers/get-current-user";
      import getChats from "@/app/api/(graphql)/Chat/resolvers/get-chats";
      import { ChatWindow } from "./components/chat-window";

      export default async function ChatPage() {
        return (
          <Injector
            fetch={async () => ({
              user: await getCurrentUser.authCall(),
              chats: await getChats.authCall(),
            })}
            Component={ChatWindow}
          />
        );
      }

    Settings

    Member Visibility