GraphQL failing to communicate with WP API

Any help is appreciated!

I am currently retrieving data from a WP Rest API. When I run the WordPress site locally on my machine using http://localhost:8000 and access the graphql playground at http://localhost:3000/api/graphql, everything works fine as expected. However, when I update the WP rest API address to http://example.com/cms, I encounter an error. The only change is the URL, so I suspect it might be related to CORS.

Upon inspecting the browser window, there are no CORS errors, ruling out that possibility. What's puzzling is that making the API call through Postman yields the expected response, entering the endpoint in a browser gives the desired results, but using the endpoint to resolve the query request leads to an error. I started examining the headers, as they seem to be the only difference between a Postman request and a regular browser request. For the local WP installation at localhost:8000, I can see the requests being made from Postman, the browser, and Axios (used in the query resolver). Conversely, for the live WP installation online, the logs show requests from Postman and the browser to the API endpoint, but not from the graphql resolver. How can I resolve this issue where the resolver fails to make the request?

This is the resolver for the query:

const resolvers = {
    Query: {
        pages: (_parent, _args, _context) => {
            return axios.get(`${wpURL}/wp-json/wp/v2/pages`)
            .then(res => res.data)
                    .catch(error => {
                        console.log("Response Status:", error.response.status);
                        console.log("Response Headers:", error.response.headers);
                        console.log("Response Data:", error.response.data);
                    });
        }
    }
}

GraphQL Server:

import {ApolloServer} from 'apollo-server-micro'
import Cors from 'micro-cors'
import {schema} from './schema'

const cors = Cors()
const server = new ApolloServer({schema})
const handler = server.createHandler({path: '/api/graphql'})

export const config = {
    api: {
        bodyParser: false,
    }
}

export default cors(handler)

Terminal:

> next dev

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /api/graphql
wait  - compiling...
event - build page: /api/graphql
event - compiled successfully

Screenshot of the issue: https://i.sstatic.net/EDTkZ.png

Any insights on what could be causing this issue?

Answer №1

After some investigation, I have come to the conclusion that when the endpoint graphql is connecting to is not secured with SSL, it does not bother to request any data.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript not functioning on Express-powered HTML document

I have set up an express server to render my payj.html file, which includes a script tag for the clyint.js file. However, I am encountering an error in the browser's console: GET net::ERR_ABORTED 404 I also attempted to include all the JavaScript ...

The issue of basic authentication failing to function on Internet Explorer and Chrome, yet operating successfully on Firefox

Here is how my authentication code looks: public class BasicAuthenticationMessageHandler : DelegatingHandler { private const string BasicAuthResponseHeader = "WWW-Authenticate"; private const string BasicAuthResponseHeaderValue = "Basi ...

Tips for updating model data when integrating jQuery Data tables with ASP.NET MVC

Managing a large amount of data returned from JSON can be complex. To tackle this, I am utilizing jQuery dataTable for sorting, filtering, and pagination purposes. The functionality is working seamlessly for sorting, searching, and paginating the data. H ...

Encountering an error with TypeScript in combination with Angular 2 and Grunt. The error message is TS

Currently in my angular2 Project, I am utilizing grunt for automating the compilation of my typescript files. Everything seems to be working fine as my files are compiling, but I keep encountering errors: app/webapp/ng2/audit_logs/auditLogs.ts(2,3): erro ...

Utilizing the Flex property on the parent div ensures that all child elements receive an equal width

I am currently working on a messaging application and I want the layout to be similar to Twitter or Whatsapp. Specifically, I want the messages from the person the user is chatting with to appear on the left side, while the user's own messages should ...

difficulty associated with using a package I uploaded to npm

I am encountering issues with importing a package that I have published on npm. after executing npm install binaryconversor I have experimented with various ways of incorporating it. let conversor = require('binaryconversor'); let conversor = ...

javascript utilizing the canvas feature to resize and add graphics to an image

Is it possible to leverage Canvas for drawing over images that have been downloaded by users, all while adjusting the scale? For instance: User uploads an image Starts drawing on the image Zooms out and continues adding more drawings All modifications ...

Activate a CSS class on click using JavaScript

Having a bit of trouble as a beginner with this. Any help would be much appreciated. This is the code in question: HTML: <div class='zone11'> <div class='book11'> <div class='cover11'></d ...

Tips for attaching to a library function (such as Golden Layout) and invoking extra functionalities

I am currently utilizing a library named Golden Layout that includes a function called destroy, which closes all application windows on window close or refresh. My requirement is to enhance the functionality of the destroy function by also removing all lo ...

Expanding Perspective in React Native

Having trouble with implementing a camera feature that isn't scaling correctly. The issue seems to be related to the styling of the container View, as when the camera is rendered independently it works fine. The goal is for the camera to activate when ...

Refresh tab controllers in Angular JS on every click event

Is there a way to refresh the tab controller every time a tab is clicked? Here's the current code: $scope.tabs = [ { id: 'tab1', title: 'tab1', icon: 'comments', templateUrl: 'tab1/tab1.tpl.html&ap ...

Are there any downsides to utilizing the jQuery Load function?

I am in the process of creating a website that displays sensor data. I plan to incorporate a HighChart line chart to showcase this data. Since my website is relatively simple in terms of content, I have decided to consolidate all elements onto one page inc ...

Using an AngularJS directive to dynamically incorporate Bootstrap classes in the HTML elements

Our application is now incorporating reusable code by creating a simple directive to display content efficiently. Directive Code: angular.module("newsStore.moduleDirectives", []) .directive('renderAboutContent', ['aboutService', r ...

Developing 2 potential results from textarea input using NODE.JS and HTML

Today, I encountered an issue while working on my bot website project that responds to textarea input. When I attempted to test it with two different commands, one of the commands stopped working unexpectedly. I'm puzzled by this and would greatly app ...

Guide to dynamically generating Angular watchers within a loop

I'm looking to dynamically create angular watches on one or more model attributes. I attempted the following approach: var fields = ['foo', 'bar']; for (var i=0, n=fields.length; i<n; i++) { $scope.$watch('vm.model.&ap ...

Can TSLint and ESLint give a warning when a function is accessed as a property?

There have been instances where I've made this specific mistake, and I'm curious if there are any ESLint or TSLint rules in place that could detect it. if (this.isBrowser && this.imageURL) {.....} private isBrowser(): boolean{ retur ...

Adjusting the page size in the material table to display all items

I am currently working with React and Material Table. Objective My goal is to provide the user with the option to set the pageSize to 'All' in order to display all rows in the material table. Steps Taken I utilized the useState hook to create ...

Can the keys of an object be retrieved in a specific order?

Is it possible to retrieve keys from a JSON object in the exact same order they were originally received? The use of Object.keys(company).length currently seems to be functioning, but I am seeking reassurance that this method will consistently deliver acc ...

Delay the execution in selenium webdriver using Java until the login button is clicked manually

Can Selenium Webdriver be used to pause code execution with webdriver.wait until the user clicks the login button on a form? The form includes a Captcha that requires manual input, preventing automated clicking of the button by the script. Clicking the log ...

utilizing javascript once form elements are dynamically inserted

While dynamically constructing form elements, I encountered an issue with generating unique IDs when the form is submitted. Everything works fine except for the JavaScript function responsible for populating the year in a dropdown selection. The issue ari ...