Problemwith Key in Next.js SSG and SSR

Question

I have some problem probably with the key key from SWR.

_app.js

const public = async (query) => {
  try {
    const client = new GraphQLClient(
      `${process.env.NEXT_PUBLIC_API_ENDPOINT}`,
    );

    const response = await client.request(query);

    return response;
  } catch (error) {
    console.error(error);
  }
};

const App = () => {
  const swrConfig = {
    fetcher: public,
    refreshInterval: 10000,
  };

  return (
    <SWRConfig value={swrConfig}>
        {getLayout(<Component {...pageProps} />)}
    </SWRConfig>
  );
};

export default App;

pages/[slug]/index.js

const Page = () => {
  const { data, error, isLoading } = useSWR('page'); // Probably problem

  return (
    <>
      {data.title}
      {data.content}
    </>
  );
};

const Content = ({ fallback }) => {

  const { page } = fallback;

  return (
    <SWRConfig value={{ fallback }}>
      {page && <Page />}
    </SWRConfig>
  );
};

Content.getLayout = function getLayout(page) {
  return <LoggedLayout>{page}</LoggedLayout>;
};

export const getStaticProps = async ({ locale, params }) => {
  const slug = params?.slug;

  const pageQuery = gql`
    {
      page(id: "${slug}", idType: URI) {
        content
        title
      }
    }
  `;

  const page = await private(pageQuery);

  return {
    props: {
      fallback: {
        page: page.page,
      },
    },
    revalidate: 10,
  };
};

export default Content;

In the above example, there is an error in the console, probably related to the SWR key.

const Page = () => {
 {data.title}
 {data.content}

They show the data. It looks like the key doesn't match during revalidation.

How to properly use a key by passing it to a Page component?