Create and fetch single page using graphql from Wordpress with clean URLs

[yudyananda]

Hi, i just learn Next.js in a couple of days. Right now i'm facing difficulties to find the proper way to fetch the data for a single page like post/[slug].js product/[slug].js

Here is my step

1. create Apollo client

import fetch from 'isomorphic-unfetch'

import { ApolloClient } from 'apollo-boost'

import { InMemoryCache } from 'apollo-cache-inmemory'

import { createHttpLink } from 'apollo-link-http'

import clientConfig from '../client-config'

const client = new ApolloClient ({

    link: createHttpLink({
        uri: clientConfig.graphqlUrl, // my wordpress graphql 
        fetch: fetch
    }),
    cache: new InMemoryCache
})

export default client

2. Index page for product

import Layout from '../layouts/layout'
import client from '../components/ApolloClient'
import Link from 'next/link'
import gql from 'graphql-tag'

const PRODUCTS_QUERY = gql`
    query {
        products(first: 4) {
            nodes {
                id
                productId
                slug
                name
            }
        }
    }
`
const IndexPage = (props) => {

    const { products } = props

    return (
        <Layout>
            <div className="product-container row">
                {products.map( product => 
                    <div className="col-lg-3 col-md-6 col-sm-12" key={product.id}>
                        <Link
                            as={`/product/${product.slug}`}
                            href={`/product/[slug]`}>
                            <a>{product.name}</a>
                        </Link>
                    </div>
                )}
            </div>
        </Layout>
    ) 
}

export const getServerSideProps = async () => {
    const result = await client.query({
        query: PRODUCTS_QUERY
    })

    return {
        props: {
            products: result.data.products.nodes,
            revalidate: 1,
        },
    };
}

export default IndexPage

3. Single page for each product pages/product/[slug].js

import Layout from '../../layouts/layout'
import { useRouter } from 'next/router'
import client from '../../components/ApolloClient'
import gql from 'graphql-tag'

const PRODUCT_QUERY = gql` 
        query Product($id: ID!) {
                product(id: $id, idType: DATABASE_ID) {
                    id
                    productId
                    slug
                    name
                } 
        }
    `
const ProductPage = () => {
    const router = useRouter()
    const { slug } = router.query

    return (
        <Layout>
            <div>{slug}</div>
        </Layout>
    )
}


export const getServerSideProps = async () => {

    const result = await client.query({
        query: PRODUCT_QUERY,
        variables: // what variable should i use
    })

    return {
        props: {
            product: result.data.product,
        },
    };
}

export default ProductPage

I'm not sure if this is the proper way but with useRouter i manage to have clean url /product/product-name by using useRouter.

The problem is how can i fetch the right product for each page. As you can see the only parameter/variable query that i have from the wordpress graphql is the $id