37
loading...
This website collects cookies to deliver better user experience
npx create-next-app@latest your-app-name --ts
teams
.id
, created_at
and updated_at
. Add a column of type Text
named name
to store our team names as well.npm i -D @genql/cli # cli to generate the client code
npm i @genql/runtime graphql # runtime dependencies
genql --endpoint <your graphql endpoint from hasura console> --output ./genql-generated -H 'x-hasura-admin-secret: <your admin secret from hasura console>'
createclient
. This creates a client you can use to send requests.genql-client.ts
with the following contents to create our client.import { createClient } from "./genql-generated";
const client = createClient({
url: <your graphql endpoint from the hasura console>,
headers: {
'x-hasura-admin-secret': <your hasura admin secret from hasura console>,
},
})
npm i react-query
pages/index.tsx
and import our client below the rest of the existing imports. src
directory so your imports may be a level higher than mine. NextJS supports moving the pages
directory into a src
directory out of the box.// ...existing imports
import { client } from '../../genql-client'
const fetchTeams = () => {
return client.query({
teams: [{}, { id: true, name: true, created_at: true }],
});
};
everything
which allows us to query all fields in a type instead of providing a boolean to every type, like so.// ...existing imports
import { everything } from "../../genql-generated";
const fetchTeams = () => {
return client.query({ teams: [{}, everything] });
};
useQuery
from React Query and wire it up to our fetchTeams function.// ...existing imports
import { client } from "../../genql-client";
import { everything } from "../../genql-generated";
import { useQuery } from "react-query";
useQuery
hook inside the Home
page component and provide it with your query key and query function as the second and third arguments respectively.const { data } = useQuery("teams", fetchTeams);
<QueryClientProvider />
component provided to us by React Query. This will have to be added further up the tree in the _app.tsx
file. Update _app.tsx
with the following code.import type { AppProps } from "next/app";
import { QueryClientProvider, QueryClient } from "react-query";
const queryClient = new QueryClient();
function MyApp({ Component, pageProps }: AppProps) {
return (
<QueryClientProvider client={queryClient}>
<Component {...pageProps} />
</QueryClientProvider>
);
}
export default MyApp;
index.tsx
page to look like the following and we should be seeing our team rendering on the page.import type { NextPage } from "next";
import styles from "../styles/Home.module.css";
import { useQuery } from "react-query";
import { client } from "../../genql-client";
import { everything } from "../../genql-generated";
const fetchTeams = () => {
return client.query({ teams: [{}, everything] });
};
const Home: NextPage = () => {
const { data, isLoading } = useQuery("teams", fetchTeams);
return (
<div className={styles.container}>
<h1>Teams</h1>
{isLoading && <p>Loading...</p>}
{data && data.teams.map((team) => <p key={team.id}>{team.name}</p>)}
</div>
);
};
export default Home;