Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2024-11-18T06:53:30.410Z
Answers.LastActivityDate: 2024-11-18T06:53:30.410Z
Answers.UserDisplayName: Tyssen
Body: <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>
  
Tags: <next.js>
Title: Setting up a new Next.js app with Craft
ThreadText: # 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"`.
  
  
  ---
  
  