Localization i18n and NextJS passing current locale into graphql query

Questions and Answers Frontend-React
1

How do I pass the current locale into the query, I can get it console logging out

const { locale: activeLocale} = useRouter();
console.log('activeLocale', activeLocale)
console.log('locales', locales)

I am using Strapi / NextJS, i18n

Here is the files I’m working with

data.js

export const fetchCMSData = async ({ query, variables = {} }: fetchCMSParams): Promise<any> => {
  const { publicRuntimeConfig } = getConfig();
  const { publicationState } = publicRuntimeConfig;
  return client.query({
    variables: {
      publicationState,
      ...variables,
    },
    fetchPolicy: 'no-cache',
    query,
    context: { headers: { 'Content-type': 'application/json' } },
  });
};

home.js
I am hard coding de in at the moment but want to pass this in

import { gql } from '@apollo/client';
import { useRouter } from 'next/router';

export const HOME_QUERY = gql`
  query HomePage($publicationState: PublicationState) {
    homePage(publicationState: $publicationState, locale: "de") {
      hero {
        title {
          id
          title
        }
        description
        video {

I have tried a few things using

import { useRouter } from ‘next/router’;
&
const { locale } = useRouter();

But I get error

locale-error
locale-error946×690 59.5 KB

Any help or pointers would be amazing.