<p>It turns out it was a problem with <code>UNABLE_TO_VERIFY_LEAF_SIGNATURE</code>, i.e. self-signed certificates. The solution was to update the <code>dev</code> script in <code>package.json</code> to <code>&quot;dev&quot;: &quot;NODE_TLS_REJECT_UNAUTHORIZED=0 next dev&quot;</code>.</p>

CC BY-SA 4.0
2024-11-18T06:53:30.410Z
2024-11-18T06:53:30.410Z
Tyssen
<p>I'm having trouble fetching data in a new Next.js app from Craft.</p>
<ul>
<li><p>I'm on Next 15.0.3 and Craft 5.5.</p>
</li>
<li><p>I've got <code>CRAFT_CMS_GRAPHQL_TOKEN</code> and <code>CRAFT_CMS_GRAPHQL_ENDPOINT</code> set up in my <code>.env</code> file.</p>
</li>
<li><p>I've got <code>'api' =&gt; 'graphql/api'</code> in <code>routes.php</code>.</p>
</li>
<li><p>I've created my schema in Craft and have tested it with graphiql.</p>
</li>
<li><p>I've got a <code>fetchApi.tsx</code> that looks like this:</p>
<pre><code>export async function fetchData(graphql) {
let craftUrl = process.env.CRAFT_CMS_GRAPHQL_ENDPOINT;

const res = await fetch(craftUrl, {
  method: 'post',
  body: graphql,
  headers: {
    'Content-Type': 'application/graphql',
    'Authorization': `Bearer ${process.env.CRAFT_CMS_GRAPHQL_TOKEN}`
  },
});

if (res.status !== 200) {
  throw new Error('Failed to fetch API');
}

const json = await res.json();

if (json.errors) {
  console.error(json.errors);
  throw new Error('Failed to fetch API');
}

return json.data;
</code></pre>
<p>}</p>
</li>
</ul>
<p>and then in <code>page.tsx</code> I have</p>
<pre><code>import { fetchData } from &quot;./utils/fetchApi&quot;;

async function getContent() {
  const data = await fetchData(`
    {
      entries(section: &quot;content&quot;) {
        id
        ... on content_Entry {
          id
          title
        }
      }
    }
  `);

  return data.content;
}

export default async function RootLayout({ children }) {
  const content = await getContent();

  console.log(content);
}
</code></pre>
<p>With that I get</p>
<blockquote>
<p>[ Server ] Error: fetch failed</p>
</blockquote>
<p>pointing at <code>const res = await fetch(craftUrl…</code>.</p>
<p>Some Googling suggested using <code>localhost</code> or <code>127.0.0.1</code> instead of my dev URL and I've tried both of those but get the same result.</p>
<p>I can hit my API URL in a browser and it returns a message:</p>
<blockquote>
<p>No GraphQL query was supplied</p>
</blockquote>
<p>so it seems that it's only a problem accessing it from within Next. Anyone got any advice on what's missing from my set-up?</p>

<next.js>
Setting up a new Next.js app with Craft
# Setting up a new Next.js app with Craft

(Asked by: username_0 on 2024-11-18)

I'm having trouble fetching data in a new Next.js app from Craft.

I'm on Next 15.0.3 and Craft 5.5.

I've got CRAFT_CMS_GRAPHQL_TOKEN and CRAFT_CMS_GRAPHQL_ENDPOINT set up in my .env file.

I've got 'api' => 'graphql/api' in routes.php.

I've created my schema in Craft and have tested it with graphiql.

I've got a fetchApi.tsx that looks like this:
export async function fetchData(graphql) {
let craftUrl = process.env.CRAFT_CMS_GRAPHQL_ENDPOINT;

const res = await fetch(craftUrl, {
  method: 'post',
  body: graphql,
  headers: {
    'Content-Type': 'application/graphql',
    'Authorization': `Bearer ${process.env.CRAFT_CMS_GRAPHQL_TOKEN}`
  },
});

if (res.status !== 200) {
  throw new Error('Failed to fetch API');
}

const json = await res.json();

if (json.errors) {
  console.error(json.errors);
  throw new Error('Failed to fetch API');
}

return json.data;

}


and then in page.tsx I have
import { fetchData } from "./utils/fetchApi";

async function getContent() {
  const data = await fetchData(`
    {
      entries(section: "content") {
        id
        ... on content_Entry {
          id
          title
        }
      }
    }
  `);

  return data.content;
}

export default async function RootLayout({ children }) {
  const content = await getContent();

  console.log(content);
}

With that I get

[ Server ] Error: fetch failed

pointing at const res = await fetch(craftUrl….
Some Googling suggested using localhost or 127.0.0.1 instead of my dev URL and I've tried both of those but get the same result.
I can hit my API URL in a browser and it returns a message:

No GraphQL query was supplied

so it seems that it's only a problem accessing it from within Next. Anyone got any advice on what's missing from my set-up?

**Tags:** next.js

---

## 1 answers

### Answer by username_0 on 2024-11-18. Score: 0

It turns out it was a problem with `UNABLE_TO_VERIFY_LEAF_SIGNATURE`, i.e. self-signed certificates. The solution was to update the `dev` script in `package.json` to `"dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 next dev"`.


---

