title: How do I do dynamic routing with Next.js based on slug from GraphQL API?
body: <p>I'm having a tough time getting my head around dynamic routing based on variables. I'm able to get a list of items in a collection but not an individual item and its fields for an individual page with a dynamic route with Next.js.</p>
  <h3>Background</h3>
  <p>I have a KeystoneJS headless CMS with a GraphQL API. I'm trying to create a simple blog with a list of posts and an individual post page. I have been able to query and return a list of posts, but I need to get an individual post based on the slug field so it can be accessed at <code>/posts/[slug].js</code>.</p>
  <h3>What I've tried</h3>
  <p>I've been using Apollo Client to handle the queries. I have an <code>apolloClient.js</code> file that connects to the API:</p>
  <pre><code>// apolloClient.js
  import { ApolloClient, InMemoryCache } from &quot;@apollo/client&quot;;
  
  export default new ApolloClient({
    uri: &quot;http://localhost:3000/admin/api&quot;,
    cache: new InMemoryCache(),
  });
  </code></pre>
  <p>I have a <code>post.service.js</code> file to query the API:</p>
  <pre><code>// post.service.js
  import { gql } from &quot;@apollo/client&quot;;
  import apolloClient from &quot;../_utils/apolloClient&quot;;
  
  export async function getAll() {
    return apolloClient
      .query({
        query: gql`
          query {
            allPosts {
              id
              term
              slug
            }
          }
        `,
      })
      .then((result) =&gt; result.data.allPosts);
  }
  
  export async function getBySlug(slug) {
    return apolloClient
      .query({
        query: gql`
          query {
            Post(slug: $slug) {
              id
              title
              lead
              body
            }
          }
        `,
      })
      .then((result) =&gt; {
        return result.data.Post;
      });
  }
  </code></pre>
  <p>And finally, in <code>posts/[slug].js</code> I am trying to return the data like so:</p>
  <pre><code>//[slug].js
  import Head from &quot;next/head&quot;;
  import { ApolloClient, InMemoryCache, gql } from &quot;@apollo/client&quot;;
  import { getAll, getBySlug } from &quot;../../_services/post.service&quot;;
  
  export default function Post({ post }) {
    return (
      &lt;div&gt;
        &lt;Head&gt;
          &lt;title&gt;Launchpad&lt;/title&gt;
          &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
        &lt;/Head&gt;
        &lt;main&gt;
          &lt;h1&gt;{post.term}&lt;/h1&gt;
        &lt;/main&gt;
        &lt;footer&gt;
          &lt;p&gt;{post.lead}&lt;/p&gt;
        &lt;/footer&gt;
      &lt;/div&gt;
    );
  }
  
  export async function getStaticPaths() {
    const posts = await getAll();
  
    const paths = posts.map((post) =&gt; ({
      params: { id: post.slug },
    }));
  
    return { paths, fallback: false };
  }
  
  export async function getStaticProps({ params }) {
    const post = await getBySlug(params.id);
  
    return { props: { post } };
  }
  </code></pre>
  <p>Obviously, this doesn't work. I must not be passing the variable (which I'm assuming is the slug) into the query properly and having read several tutorials I still can't get my head around it. Does anyone see what I'm doing wrong?</p>