ilhamsa1/graphql.js

## graphql.js
import React from 'react'
import { useQuery } from '@apollo/react-hooks'
import { LoadingDots } from 'site_library/components'

const Query = ({ children, query, id, where }) => {
  const { data, loading, error } = useQuery(query, {
    variables: {
      id,
      where,
    },
  })

  if (loading) {
    return (
      <div style={{ margin: '170px' }}>
        <LoadingDots />
      </div>
    )
  }
  if (error) {
    return (
      <p>
        Error: {JSON.stringify(error)}
      </p>
    )
  }
  return children({ data })
}

export default Query

## page.js
import React from 'react'
import Head from 'next/head'
import Query from '../../../components/query'

import { productServices as WILLS_LPA } from '../../../graphql/products'
import WillsLpa from '../../../components/product/wills-lpa'

const VARIABEL = {
  slug: 'wills-lpa',
  type: 'Personal',
}

const WillsLpa = () => {
  return (
    <>
      <Head>
        <title>Personal - Wills Lpa</title>
        <meta name="description" content="Lawkin Landing Page" />
        <meta name="theme-color" content="#2563FF" />
        <meta name="keywords" content="Lawkin Landing Page" />
      </Head>
      <Query query={WILLS_LPA} where={VARIABEL}>
        {({ data }) => {
          return (
            <WillsLpa content={data} />
          )
        }}
      </Query>
    </>
  )
}

export default WillsLpa
	import React from 'react'
	import { useQuery } from '@apollo/react-hooks'
	import { LoadingDots } from 'site_library/components'

	const Query = ({ children, query, id, where }) => {
	const { data, loading, error } = useQuery(query, {
	variables: {
	id,
	where,
	},
	})

	if (loading) {
	return (
	<div style={{ margin: '170px' }}>
	<LoadingDots />
	</div>
	)
	}
	if (error) {
	return (
	<p>
	Error: {JSON.stringify(error)}
	</p>
	)
	}
	return children({ data })
	}

	export default Query
	import React from 'react'
	import Head from 'next/head'
	import Query from '../../../components/query'

	import { productServices as WILLS_LPA } from '../../../graphql/products'
	import WillsLpa from '../../../components/product/wills-lpa'

	const VARIABEL = {
	slug: 'wills-lpa',
	type: 'Personal',
	}

	const WillsLpa = () => {
	return (
	<>
	<Head>
	<title>Personal - Wills Lpa</title>
	<meta name="description" content="Lawkin Landing Page" />
	<meta name="theme-color" content="#2563FF" />
	<meta name="keywords" content="Lawkin Landing Page" />
	</Head>
	<Query query={WILLS_LPA} where={VARIABEL}>
	{({ data }) => {
	return (
	<WillsLpa content={data} />
	)
	}}
	</Query>
	</>
	)
	}

	export default WillsLpa