Set up dynamic routes in Astro SSR mode

I try to create dynamic routes in astro SSR mode. I am using Apollo client.

I have this grapql query from the api:

const GET_PAGE = gql`
  query Page($target: String!) {
    page(target: $target) {
      type
      content {
        ... on MyPage {
          id
          url
        }
      }
    }
  }
`;

So based on the target variable I can request the correct content.

//[slug].astro
---
import { gql } from '@apollo/client';

    const GET_PAGE = gql`
      query Page($target: String!) {
        page(target: $target) {
          type
          content {
            ... on MyPage {
              id
              url
            }
          }
        }
      }
    `;

export const getRelativePath = (path: string) => {
  return `/${path.replace(/^(?://|[^/]+)*//, '')}`;
};

const { data, loading } = await client.query<Data>({
  query: GET_PAGE,
  variables: {
    target: 'my-test-page',
  },
});

const path = getRelativePath(data.page.content.url);
---

<Layout title="Test">
  {loading && <p>Loading...</p>}
  {
    !loading && (
      <>
        <p>{path}</p>
      </>
    )
  }
</Layout>

For now I hardcoded the target variable, that’s all working fine. How do I make this dynamic?

Step one: how do I make the target variable dynamic? And how do I fill the [slug] properly?