Offline Mode Chat Issues: Message Sending Errors and Unnecessary API Calls

[Vijay-Magadum]

hey Guys,
I have enabled offline support by adding the enableOfflineSupport prop to the chat component, and I am able to retrieve channels while offline. I have also added a database logger to track the queries for each operation. However, my problem arises when using the chat in offline mode. It is not sending messages and is throwing errors. Additionally, the event API is triggered for every word I type, which should be ignored while in offline mode. How can I fix these issues? Please help me with this.

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-10-29.at.10.46.59.mp4

[ruturaj-hegana]

Could you please provide more details on how you are handling the client?

[Vijay-Magadum]

I have stacked my chat component around stack screens as below:

<PaperProvider>
      <UserNetworkProvider>
        <UserAuthProvider>
          <GetStreamChatComponent theme={theme}>
            <ApiDataProvider>
              <SelectedDataProvider>
                <SelectedChannelProvider>
                  <StackScreens />
                </SelectedChannelProvider>
              </SelectedDataProvider>
            </ApiDataProvider>
          </GetStreamChatComponent>
        </UserAuthProvider>
      </UserNetworkProvider>
    </PaperProvider>

then i am handling client. connect method in my GetStreamChatComponent as below:

QuickSqliteClient.logger = (level, message, extraData) => {
  console.log(
    level,
    `QuickSqliteClient-------------- from logger: ${message}`,
    extraData
  );
};
const GetStreamChatComponent: React.FC<GetStreamChatComponentProps> = ({
  children,
  theme,
  ...props
}) => {
  const chatClient = StreamMethods.getChatClient();
  const [streamLanguage, setStreamLanguage] = useState<any>(null);
  const { t } = useTranslation();
  const [isClientReady, setIsClientReady] = useState(false);
  const { loading, user, isLoggedIn } = useAuthContext();

  // useEffect(() => {
  //   const getLanguage = async () => {
  //     const language = await initializeLanguage();
  //     setStreamLanguage(language);
  //   };
  //   getLanguage();
  // }, [isLoggedIn]);
  useEffect(() => {
    const startChat = async () => {
      try {
        const userData = {
          id: user.id,
        };
        console.log("userData- - - -- - - -", userData);
        const token = await StreamMethods.getStoredStreamToken();
        console.log("Token- - - -- - - -", token);
        if (!isClientReady) {
          const connectPromise = chatClient.connectUser(userData, token);
          console.log("connectPromise- - - -- - - -", connectPromise);
          setIsClientReady(true); // this allows components to render

          // await connectPromise;
        }

        console.log(
          "---------------- User connected to Stream Chat ------------",
          chatClient?.userId
        );
      } catch (e) {
        console.log("error while connecting user from stream component", e);
      }
    };
    console.log(
      "isLoggedIn- - - -- ---------******************* *************** - -",
      isLoggedIn
    );
    if (isLoggedIn) startChat();
  }, [isLoggedIn]);

  if (!isClientReady && isLoggedIn) return null;
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <OverlayProvider i18nInstance={streamLanguage}>
        <Chat
          client={chatClient}
          style={theme}
          // i18nInstance={streamLanguage}
          enableOfflineSupport
          ImageComponent={FastImage}
        >
          {children}
        </Chat>
      </OverlayProvider>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  errorText: {
    textAlign: "center",
    color: "red",
    margin: 10,
  },
});

export default GetStreamChatComponent;

and also i have declared chat client into my seperate stream class like below:

private _client: StreamChat<DefaultStreamChatGenerics> = this.initChatClient();
private initChatClient() {
    const client = StreamChat.getInstance(APIKey, {
      allowServerSideConnect : false,
      enableInsights: true,
      persistUserOnConnectionFailure: true,
      warmUp: true,
    });
    client.axiosInstance.interceptors.request.use(AxiosLogger.requestLogger);
    client.axiosInstance.interceptors.response.use(AxiosLogger.responseLogger);
    return client;
  }