-
Notifications
You must be signed in to change notification settings - Fork 408
-
Hi Team I think I setup the SDK
function Photos({ children }) {
const app = useFirebaseApp(); // a parent component contains a `FirebaseAppProvider`
const auth = getAuth(app);
const [user] = useUserState();
const { id } = useParams();
const photosmetada = {
user: user,
gameid: id,
};
//const messagesmetadaform = {
// user: user,
// gameid: id
//};
//console.log(messagesmetadaform)
// any child components will be able to use `useUser`, `useDatabaseObjectData`, etc
return (
<AuthProvider sdk={auth}>
<DatabaseProvider sdk={database}>
<Uploadphotos/>
<Displayphotos photosmetada={photosmetada}/>
</DatabaseProvider>
</AuthProvider>
);
}```
And the code of Displayphotos is
```function Displayphotos(photosmetada) {
if (typeof (photosmetada.photosmetada.user) !== 'undefined') {
var gameid = photosmetada.photosmetada.gameid;
}
const storage = useStorage();
const photoRef = ref(storage, 'images/010/237-536x354.jpg');
const { status, data: imageURL } = useStorageDownloadURL(photoRef);
var database = useDatabase();
var querypath = '/photos/' + gameid;
const photosRef = refdatabase(database, querypath);
const objectlistofimages = useDatabaseListData(photosRef);
if (status === 'loading') {
return <span>loading...</span>;
}
return <img src={imageURL} alt="game NSYL" />;
}
But I got the message Error: SDK not found. useSdk must be called from within a provider
What I am doing wrong here ?
Beta Was this translation helpful? Give feedback.
All reactions
Hi @grojas123,
It looks like you only have a provider for Auth and Database. In your Displayphotos component, you are using useStorage(), but you do not have a provider for storage yet. Try doing the same thing you did with Auth and Database but add StorageProvider.
Replies: 2 comments 3 replies
-
Hi @grojas123,
It looks like you only have a provider for Auth and Database. In your Displayphotos component, you are using useStorage(), but you do not have a provider for storage yet. Try doing the same thing you did with Auth and Database but add StorageProvider.
Beta Was this translation helpful? Give feedback.
All reactions
-
Thank you let me check
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1
-
I used this example to setup the StorageProvider
function FirebaseServices({ children }) {
const app = useFirebaseApp();
const firestore = getFirestore(app);
const auth = getAuth(app);
const storage = getStorage(app);
return (
<FirestoreProvider sdk={firestore}>
<StorageProvider sdk={storage}>
<AuthProvider sdk={auth}>{children}</AuthProvider>
</StorageProvider>
</FirestoreProvider>
);
}
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 2
-
I wanna test a bit with firebase and the storage on my Nextjs App.
Each time i visit the route where im testing the firebase storage, i get the error: Error: SDK not found. useSdk must be called from within a provider
Thats my code of the page that im visiting for testing.
import { useStorage, useStorageDownloadURL } from 'reactfire'; import { ref } from 'firebase/storage'; export function Setups() { const storage = useStorage(); const testRef = ref(storage, 'Setups/il0n5yecjakf1tisly9se8_bmw_zolder_race'); const { status, data } = useStorageDownloadURL(testRef); return ( <> <p>Hello World from Setups Component</p> </> ); }
Thats how i setup the Providers:
_app.tsx
<FirebaseAppProvider firebaseConfig={firebaseConfig}> <FirebaseSDKProviders> <Component {...pageProps} /> </FirebaseSDKProviders> </FirebaseAppProvider>
firebase-provider.tsx
import { FirestoreProvider, useFirebaseApp } from 'reactfire'; import { getFirestore } from 'firebase/firestore'; import { ChildrenProps } from './children-props'; export function FirebaseSDKProviders({ children }: ChildrenProps) { const app = useFirebaseApp(); const firestore = getFirestore(app); return <FirestoreProvider sdk={firestore}>{children}</FirestoreProvider>; }
firebase.ts
export const firebaseConfig = { apiKey: process.env.FIREBASE_API_KEY, authDomain: process.env.FIREBASE_AUTH_DOMAIN, projectId: process.env.FIREBASE_PROJECT_ID, storageBucket: process.env.FIREBASE_STORAGE_BUCKET, messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID, appId: process.env.FIREBASE_APP_ID, measurementId: process.env.FIREBASE_MEASUREMENT_ID }
Is there something that im missing?
Beta Was this translation helpful? Give feedback.
All reactions
-
Yes pls remember you need to setup Firebase in the react env . This is in index.js .
In my case :
const firebaseConfig = {
apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
authDomain: "example.com",
databaseURL: "https://example.com",
projectId: "XXXXX",
storageBucket: "example.com",
messagingSenderId: "XXXXX",
appId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
measurementId: "XXXXXXXXXXXXXX"
};
ReactDOM.render(
<BrowserRouter>
<FirebaseAppProvider firebaseConfig={firebaseConfig}>
<App />
</FirebaseAppProvider>
</BrowserRouter>,
document.getElementById('root')
);
Beta Was this translation helpful? Give feedback.