Problem with subscription and mutation

Help
, ,
1

Hello, If anyone can help, I have a problem with a subscription. When I make a mutation from my web site to add a new event to a list, it is not adding simultaneously but it is adding data to cache however, when I make the mutation from apollo explorer it works without problem. What might be the problem? I couldn’t find it.

Detail: When I start to watch subscription from apollo explorer and make the mutation from the website I can see the data. But still it is not being listed simultaneously. The ROOT_QUERY is not chaning, but the event is listed in the cache, I use console.log() inside the updateQuery, it is not responding when I add data from my website, but when I add a data from explorer I can see the log.
Confusing part here: If I’m able to add data from explorer than there is nothing wrong with subscripiton. Also I can make the mutation from my website, so there is nothing wrong with the mutation. But still data is not being listed simultaneously when i add it from my website. I cheked the queries, they look good.
Here is the code:

import { useEffect } from "react";
import { Card } from "antd";
import { useQuery, gql } from "@apollo/client";
import { Link } from "react-router-dom";

const GET_EVENTS = gql`
  query Query {
    events {
      id
      title
      desc
      date
      from
      to
    }
  }
`;

const SUBSCRIBE_EVENTS = gql`
  subscription Subscription {
    eventCreated {
      id
      title
      desc
      date
      from
      to
    }
  }
`;

const ListEvents = () => {
  const { loading, error, data, subscribeToMore } = useQuery(GET_EVENTS);

  useEffect(() => {
    console.log("1");
    subscribeToMore({
      document: SUBSCRIBE_EVENTS,
      updateQuery: (prev, { subscriptionData }) => {
        console.log("2");
        if (!subscriptionData) return prev;
        return {
          events: [subscriptionData.data.eventCreated, ...prev.events],
        };
      },
      onError: (err) => {
        console.error("Error with subscription: ", err);
      },
    });
  }, [subscribeToMore]);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error : {error.message}</p>;

  return data.events.map(({ date, desc, title, id }) => (
    <div key={id} style={{ padding: "1em" }}>
      <Link to={`events/${id}`}>
        <Card
          hoverable
          size="middle"
          title={title}
          extra={date}
          style={{ width: "100%" }}
        >
          <p>{desc}</p>
        </Card>
      </Link>
    </div>
  ));
};

export default ListEvents;