How can I fetch data using GraphQL in a Next.js application?

How can I fetch data using GraphQL in a Next.js application?

You can use Apollo Client or Relay to fetch data from a GraphQL API in your Next.js app. Would you like a code example?

Yes, please provide a code example using Apollo Client.

First, install Apollo Client: npm install @apollo/client. Then, set up ApolloProvider in your _app.js file. Here's a basic example:

import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint.com/graphql',
  cache: new InMemoryCache(),
});

function MyApp({ Component, pageProps }) {
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}

How do I make a query to fetch data after setting up Apollo?

You can use the useQuery hook from Apollo Client. Here's an example:

import { useQuery, gql } from '@apollo/client';

const GET_DATA = gql`
  query GetData {
    items {
      id
      name
    }
  }
`;

function MyComponent() {
  const { loading, error, data } = useQuery(GET_DATA);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return <ul>{data.items.map(item => <li key={item.id}>{item.name}</li>)}</ul>;
}