David Alonso•7mo ago

What token to pass when doing fetchQuery on the client

Maybe this is a really stupid question, but when I do await fetchQuery on a client function (e.g. .ts file marked as "use client"), I can't get a token from getAuthToken (for server auth) and getUserIdentity returns null... Any ideas?

3 Replies

David AlonsoOP•7mo ago

is my solution to manually pass around a jwt token from components to client helper functions?

sshader•7mo ago

Any reason you can't do something like

const convexClient = useConvex()
const result = await convexClient.query(api.foo.bar)

const convexClient = useConvex()
const result = await convexClient.query(api.foo.bar)

given you're doing this only on the client?

David AlonsoOP•7mo ago

the function that does the query is not inside a react component, don't know if that makes sense. Currently I'm doing

export const getClientFirebaseApp = async ({
...
  token,
})
const foo = await fetchQuery(api.bar, {..args}, { token });
}

export const getClientFirebaseApp = async ({
...
  token,
})
const foo = await fetchQuery(api.bar, {..args}, { token });
}

Then from a react component:

const { getToken } = useAuth();
  const tokenPromise = getToken({ template: "convex" });
  const [token, setToken] = useState<string | undefined>(undefined);
  useEffect(() => {
    const getToken = async () => {
      const token = await tokenPromise;
      setToken(token ?? undefined);
    };
    getToken();
  }, [tokenPromise]);

useEffect(() => {
    const initDb = async () => {
          const initializedDb = await getClientFirebaseApp({ ..., token})
...

const { getToken } = useAuth();
  const tokenPromise = getToken({ template: "convex" });
  const [token, setToken] = useState<string | undefined>(undefined);
  useEffect(() => {
    const getToken = async () => {
      const token = await tokenPromise;
      setToken(token ?? undefined);
    };
    getToken();
  }, [tokenPromise]);

useEffect(() => {
    const initDb = async () => {
          const initializedDb = await getClientFirebaseApp({ ..., token})
...

There's probably much cleaner ways of handling this, but if I put the convex hook inside clientApp I get:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

What token to pass when doing fetchQuery on the client

Did you find this page helpful?