Provider

The QueryStoreProvider can be used to provide a QueryStore to the app

const eventStore = new EventStore();
const queryStore = new QueryStore(eventStore);

const root = (
  <QueryStoreProvider store={queryStore}>
    <App />
  </QueryStoreProvider>
);

Once your app is wrapped in the provider you can access the query store anywhere using the useQueryStore hook

function UserName({ pubkey }: { pubkey: string }) {
  const store = useQueryStore();

  const [profile, setProfile] = useState();

  useEffect(() => {
    const sub = store.profile(pubkey).subscribe(setProfile);

    return () => sub.unsubscribe();
  }, [pubkey, store]);

  return <span>{profile?.display_name}</span>;
}