Documentation for using hasura-storage outside of nhost

[commandodev]

Hi folks,

I'm trying to get hasura-storage working with a pre-existing hasura install on fly.io. The client is authenticated with clerk.

I've got the hasura-storage service up and running apparently, but I'm struggling a bit to figure out how to use it stand alone from the front end.

Are there any documents I could follow? Alternatively and guidance you might have would be helpful - happy to contribute some docs when I get it up and running :-)

[dbarrosop]

The relevant information is here:

https://github.com/nhost/hasura-storage#self-hosting-the-service

and if you need to write a custom client:

https://github.com/nhost/hasura-storage#openapi

Other than that, instructions will depend on the provider so without more information it is hard to know what your issue is.

[commandodev]

What I was after was more about how to use the newly set up service from the front end:

Here's what I came up with:

import React, { createContext, useContext, useState, useEffect } from 'react';
import { HasuraStorageClient } from '@nhost/hasura-storage-js';
import { useAuth } from '@clerk/clerk-react';
import { env } from '~/env.mjs';

interface HasuraStorageContextProps {
  client: HasuraStorageClient | null;
}

const HasuraStorageContext = createContext<HasuraStorageContextProps>({
  client: null,
});

export const HasuraStorageProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const { getToken } = useAuth();

  const [hasuraStorageClient, setHasuraStorageClient] = useState<HasuraStorageClient | null>(null);

  useEffect(() => {
    async function initHasuraStorageClient() {
      const token = await getToken({ template: "hasura" });
      if (token) {
        const client = new HasuraStorageClient({
          url: env.NEXT_PUBLIC_HASURA_STORAGE_ENDPOINT
        });
        client.setAccessToken(token);
        setHasuraStorageClient(client);
      }
    }
    initHasuraStorageClient();
  }, [getToken]);

  return (
    <HasuraStorageContext.Provider value={{ client: hasuraStorageClient }}>
      {children}
    </HasuraStorageContext.Provider>
  );
};

export const useHasuraStorageClient = (): HasuraStorageClient | null => {
  const { client: hasuraStorageClient } = useContext(HasuraStorageContext);
  return hasuraStorageClient;
};

// And
    <ClerkProvider {...pageProps} navigate={(to) => push(to)}>
      <HasuraStorageProvider>
        <UrqlProviderWrapper>
          {getLayout(<Component {...pageProps} />)}
        </UrqlProviderWrapper>
      </HasuraStorageProvider>
    </ClerkProvider>

If that would help at all (and it looks correct) please feel free to add this to documentation 👍