Remix Apollo Client

A library that allows server side rendering and preloading of graphql queries with Remix. The library is built to allow normal graphQL code in the component.

Usage

Edit entry.client.tsx:

startTransition(() => {
  hydrateRoot(
    document,
    <StrictMode>
      <RemixApolloClientProvider>
      <RemixBrowser />
      </RemixApolloClientProvider>
    </StrictMode>
  );
});

Edit entry.server.tsx:

function Setup({ context, url} : {context: EntryContext, url: string}) {
  return (
    <RemixApolloServerProvider>
      <RemixServer
        context={context}
        url={url}
        abortDelay={ABORT_DELAY}
      />
    </RemixApolloServerProvider>
  )
}

Add a file under services called graphql.server.tsx. This file contains the calls to your graphQL server, the first method is for the loader, while the second is for non server side rendering graphQL calls.

export const runGraphQLQueries = async (request: Request, element: React.ReactNode, path: string) => {

    // let user = await authenticator.authenticate("oidc", request, {
    //    failureRedirect: "/login",
    //  });
      
    return await runGraphQLLoader({
        request,
        element: element,
        link: createHttpLink({ 
          uri: "your url",
          headers: {
            // authorization: `Bearer ${user.token}`
          }}),
        reactRouterPath: path
      });
    
}

export const RunGraphQLActions = async (request: Request) => {
    // let user = await authenticator.authenticate("oidc", request, {
   //     failureRedirect: "/login",
   //   });
      
    return runGraphQLAction({
        request: request,
        fetch: async (body, headers) => {
            const result = await fetch("your url", {
                method: "POST",
                body: body,
                headers: {
                    "Content-Type": "application/json",
                    // Authorization: `Bearer ${user.token}`
                }
            })
            return result.json()
        },
    })
}

Add a file called graphql.tsx under routes. This will respond to any non SSR requests.

export const action = async ({request}: {request: Request}) => {
    return RunGraphQLActions(request)
}

Under each page under route that renders data add the following:

export async function loader({ request}: {request: Request}) {
  return await runGraphQLQueries(request, <MyPageName />, "/MyPageName")
}

export default function MyPageName() {
  useGraphQLLoaderData()

  return (
    ...
  )
}