How to connect Prismic with next.js project using graphql

Developing with Prismic
1

Hello everyone,

I am very new to using Prismic and graphql . So please be nice to me :slight_smile:
I wanted to start a prismic project just to get to know how it all works. Therefore I started with just a title element with a uid in Prismic and tried connecting this to the next.js file via graphql.

I know that I get the data of the title I want from prismic but I can not display it in the localhost. It always gives me server errors, saying that something is undefined.

Error
Error715×455 15.8 KB

I used the following code. I am very sure that it is obvious for experts what I am doing wrong but I am triing to connect the content since 5 days and i don´t know what to try anymore.

I would very much aprechiate any help.
Thanks in advance.

Code:
import Head from 'next/head'
import React from "react"
import {Link, RichText, Date} from 'prismic-reactjs';
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import {
ApolloClient,
InMemoryCache,
ApolloProvider,
useQuery,
gql,
} from "@apollo/client";
import { PrismicLink } from "apollo-link-prismic";

const client = new ApolloClient({
link: PrismicLink({
uri: "https://testsitecustomer.cdn.prismic.io/graphql",
}),
cache: new InMemoryCache()
});
var test = "";
export const document= client.query({
query: gql query{ documentation(lang: "*", uid: "prismic") { title } }
}).then(response => {
console.log("response");
test = response;
console.log(test.data.documentation.title[0].text);
//console.log(response);
}).catch(error => {
console.log("error");
console.error(error);
});

function linkResolver(doc) {

// Define the url depending on the document type
if (doc.type === 'page') {
    return '/page/' + doc.uid;
} else if (doc.type === 'blog_post') {
    return '/blog/' + doc.uid;
}

// Default to homepage
return '/';

}

export default function Home() {
return (
<>

My test

  <main className={styles.main}>
      <span>{ test.data.documentation.title[0].text }</span>
  </main>
</>

)
}

3

Hello @marlen.bentner

Welcome to the Prismic community and thanks for reaching out to us.

What are you getting in response when you console it? Can you paste it here?

Thanks,
Priyanka

4

  1. {data: {…}, loading: false, networkStatus: 7}

  2. data:

1. documentation:

  1. title: Array(1)

    1. 0: {type: 'heading1', text: 'Connection works!', spans: Array(0)}
    2. length: 1
    3. [[Prototype]]: Array(0)

  2. __typename: "Documentation"
  3. [[Prototype]]: Object

2. [[Prototype]]: Object
  1. loading: false
  2. networkStatus: 7
  3. [[Prototype]]: Object
5

Hello @marlen.bentner

When using Next.js for templating data, we use the RicheText helpers' function to render Rich text fields. You need to pass the field name like this:

{RichText.render(test.data.documentation.title, linkResolver)}

Please find more detail in this article: Templating Content in Next.js. - Prismic

Let me know if you have any questions.

Thanks,
Priyanka