Docs How-To GuidesQuery Data in the Browser

Query Data in the Browser

When you query data in the browser, you're leveraging Apollo's useQuery hook within your React components.

Important

This is client-side data fetching, which means the data is fetched after your page renders in the browser rather than at build time or request time on the server. This can be very beneficial and powerful. It can also cause performance and SEO issues. Be sure to understand the implications of client-side data fetching before using it in your project.

0. Prerequisites

If you haven't already, follow the Basic Setup steps to get Faust.js set up.

1. Create a new page

Create a new page in your Next.js app. For this example we'll create a new page called client.js in the pages directory. This client can also be used in any component.

page/client.js

export default function Page(props) {
	return <h1>Client Page</h1>;
}

Make sure you can navigate to this page in your browser.

2. Adding the Apollo Client

To query data in the browser, you need to import the useQuery from the @apollo/client package. This hook will execute queries using the same client used by templates on the server.

page/client.js

import { gql, useQuery } from "@apollo/client";
 
export default function Page(props) {
	const { data } = useQuery();
 
	return <h1>Client Page</h1>;
}

3. Adding a Query

It's time to write our GraphQL query to fetch some data. For this example we'll be fetching the site title and description from your WP site's general settings.

page/client.js

import { gql, useQuery } from "@apollo/client";
 
export default function Page(props) {
	const { data } = useQuery(Page.query);
 
	return <h1>Client Page</h1>;
}
 
Page.query = gql`
	query {
		generalSettings {
			title
			description
		}
	}
`;

While it's can be convinient to co-locate a GraphQL query within the same file. You can also import and use queries from an external file.

4. Displaying the Data

Now that we have our query, we can display the data on the page.

page/client.js

import { gql, useQuery } from "@apollo/client";
 
export default function Page(props) {
	const { data } = useQuery(Page.query);
	const { title, description } = data.generalSettings;
 
	return (
		<>
			<h1>{title}</h1>
			<p>{description}</p>
		</>
	);
}
 
Page.query = gql`
	query {
		generalSettings {
			title
			description
		}
	}
`;