CODEWITHSUNDEEP
javascriptreactjsgraphqlnext.jsgraphql-js
Xetify
Xetify

Reputation: 51

TypeError: Cannot read properties of undefined (reading 'document')

I was using qraphql (JavaScript graphql-request library) in a project and ran into a typeError. Here's the code:

import { request, gql } from 'graphql-request'
const graphqlAPI = process.env.NEXT_PUBLIC_GRAPHCMS_ENDPOINT
export const getPosts = async () => {
    const query = gql`
    query MyQuery {
        postsConnection {
          edges {
            node {
              author {
                bio
                name
                id
                photo {
                  url
                }
              }
              createdAt
              slug
              title
              excerpt
              featuredImage {
                url
              }
              categories {
                name
                slug
              }
            }
          }
        }
      }
 `     
    const result = await request(graphqlAPI, query)

    return result.postsConnection.edges
}

The error said there was a problem with the document parameter of the request.

Upvotes: 3

Views: 4274

Answers (2)

Yash_3001
Yash_3001

Reputation: 28

2 Errors:

  1. The method which you have used here to fetch the data is outdated.
  2. The endpoint here is missing you will find it in the graphcms in your account : settings/access/api access /endpoints

Remove the command

const graphqlAPI = process.env.NEXT_PUBLIC_GRAPHCMS_ENDPOINT

and the .env file associated with it. After that use the following code:

import { gql } from 'graphql-request';
import { GraphQLClient } from 'graphql-request';

export const getPosts = async () => {
    
    // new endpoint
    const graphQLClient = new GraphQLClient(
        endpoint // here add your endpoint
    );

    const query = gql`
    query MyQuery {
        postsConnection {
            edges {
                node {
                    author {
                        bio
                        name
                        id
                        photo {
                            url
                        }
                    }
                    createdAt
                    slug
                    title
                    excerpt
                    featuredImage {
                        url
                    }
                    categories {
                        name
                        slug
                    }
            }
        }
        }
    }
    `
    const result = await graphQLClient.request(query)
    return result.PostsConnection;
}

Upvotes: 1

Xetify
Xetify

Reputation: 51

Never Mind, its because the Next_endpoint wasnt defined, all good now!

Upvotes: 1

Related Questions