use buckets gql query

src/components/BucketSelect.tsx

@@ -1,12 +1,13 @@
 import React from "react"
-import { useState } from "react"
 import { Link } from "react-router-dom"
+import { useListBucktesQuery } from "../generated/graphql"
 import Breadcrum from "./Breadcrum"
 import MoreMenu from "./MoreMenu"
+import { ReactComponent as Spinner } from "./../assets/spinner.svg"
 
 const BucketSelect: React.FC = () => {
 
-	const [buckets] = useState(["dev"])
+	const {data: buckets, loading} = useListBucktesQuery()
 
 	return (
 		<div>
@@ -17,12 +18,17 @@ const BucketSelect: React.FC = () => {
 				</div>
 			</div>
 			<ul>
-				{buckets.map((e)=>
+				{buckets?.buckets.map((e)=>
 					<li key={e}>
 						<Link to={`/f/${e}/`} >{e}</Link>
 					</li>
 				)}
 			</ul>
+			{loading && 
+				<div className="flex justify-center mt-4">
+					<Spinner className="animate-spin h-6 w-6 dark:text-white"  />
+				</div>
+			}
 		</div>
 	)
 }

src/generated/graphql.tsx

@@ -102,6 +102,8 @@ export type RootQuery = {
   __typename?: "RootQuery";
   /** True if the user is authorized */
   authorized: Scalars["Boolean"];
+  /** List available buckets */
+  buckets: Array<Maybe<Scalars["String"]>>;
   directories: Array<Directory>;
   file?: Maybe<File>;
   files: Array<File>;
@@ -191,6 +193,14 @@ export type IsAuthQuery = (
   & Pick<RootQuery, "authorized">
 );
 
+export type ListBucktesQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type ListBucktesQuery = (
+  { __typename?: "RootQuery" }
+  & Pick<RootQuery, "buckets">
+);
+
 export type LoginMutationVariables = Exact<{
   username: Scalars["String"];
   password: Scalars["String"];
@@ -436,6 +446,38 @@ export function useIsAuthLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<IsA
 export type IsAuthQueryHookResult = ReturnType<typeof useIsAuthQuery>;
 export type IsAuthLazyQueryHookResult = ReturnType<typeof useIsAuthLazyQuery>;
 export type IsAuthQueryResult = Apollo.QueryResult<IsAuthQuery, IsAuthQueryVariables>;
+export const ListBucktesDocument = gql`
+    query listBucktes {
+  buckets
+}
+    `
+
+/**
+ * __useListBucktesQuery__
+ *
+ * To run a query within a React component, call `useListBucktesQuery` and pass it any options that fit your needs.
+ * When your component renders, `useListBucktesQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useListBucktesQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useListBucktesQuery(baseOptions?: Apollo.QueryHookOptions<ListBucktesQuery, ListBucktesQueryVariables>) {
+	const options = {...defaultOptions, ...baseOptions}
+	return Apollo.useQuery<ListBucktesQuery, ListBucktesQueryVariables>(ListBucktesDocument, options)
+}
+export function useListBucktesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ListBucktesQuery, ListBucktesQueryVariables>) {
+	const options = {...defaultOptions, ...baseOptions}
+	return Apollo.useLazyQuery<ListBucktesQuery, ListBucktesQueryVariables>(ListBucktesDocument, options)
+}
+export type ListBucktesQueryHookResult = ReturnType<typeof useListBucktesQuery>;
+export type ListBucktesLazyQueryHookResult = ReturnType<typeof useListBucktesLazyQuery>;
+export type ListBucktesQueryResult = Apollo.QueryResult<ListBucktesQuery, ListBucktesQueryVariables>;
 export const LoginDocument = gql`
     mutation Login($username: String!, $password: String!) {
   login(username: $username, password: $password) {

src/graphql/listBuckets.graphql

@@ -0,0 +1,3 @@
+query listBucktes{
+    buckets
+}