I am trying to query my ACF options page fields that I have set up in the admin side, and through the WP API Query them using GatsbyJS's gatsby-source-wordpress. When I run build and dev it requests the data and prints out the output
=== [ Fetching wordpress__acf_options ] === http://url.local/wp-json/acf/v3/options/options/
⠈ source and transform nodes -> wordpress__acf_options fetched : 1
Fetching the wordpress__acf_options took: 518.885ms
=== [ Fetching wordpress__acf_options ] === http://url.local/wp-json/acf/v3/options/options
⠈ source and transform nodes -> wordpress__acf_options fetched : 1
Fetching the wordpress__acf_options took: 478.580ms
and within those urls on the browser, I get this response. So I know the data is correct
{
acf: {
social_options: [
{
social_name: "Twitter ",
social_link: "https://twitter.com"
},
{
social_name: "Linkedin",
social_link: "https://www.linkedin.com/"
}
],
test: "pagfe 1"
}
}
The problem is when I query the allWordpressAcfOptions in the internal GraphQL. I try and see what options are available to query but all I can get is the ID. This is my query below.
{
allWordpressAcfOptions {
edges {
node {
id
internal {
type
contentDigest
owner
}
children {
id
}
wordpress_id
}
}
}
}
and none of the data in there is the data I need, an none of it is representative of the same data shown from REST API Link. So there is something missing. This is the response I get back from the Query.
{
"data": {
"allWordpressAcfOptions": {
"edges": [
{
"node": {
"id": "038ece9f-326d-5bb0-8f17-1bb72ce06c57",
"internal": {
"type": "wordpress__acf_options",
"contentDigest": "10b2729a5f87723bbafc539f99fb23d6",
"owner": "gatsby-source-wordpress"
},
"children": [],
"wordpress_id": "acf"
}
}
]
}
}
}
For reference my gatsby-source-wordpress options in the gatsby config are this below
options: {
baseUrl: 'url.local',
protocol: 'http',
hostingWPCOM: false,
useACF: true,
acfOptionPageIds: ['options'],
verboseOutput: true
},
options refers to the page ID the my ACF options page is set in my functions.php on the wordpress side.
So in summary, GatsbyJs is referencing the API and pulling the data but what am I doing wrong to query the data via GraphQL?
Related
I guess this is a simple issue, but I am stuck here for a while, so any advice may be helpful!
I have a react app and I am calling a GraphQL api (with apollo). Inside an arrow function component I have:
const [executeQuery, { data }] = useLazyQuery(GET_ALL_TASKS);
const findId = (step) => {
executeQuery({
variables: {
"query": {
"state": "CREATED",
"taskDefinitionId": "something"
}
}
})
}
The query is successful and in the browser inspect panel I get this as the graphql response:
{
"data" : {
"tasks" : [ {
"id" : "2251",
"name" : "some_name",
"__typename" : "Task"
} ]
}
}
In my code I want to use the retrieved id. How can I isolate the id from the response? When I am trying to access the data I get an undefined error.
Thank you!
Not sure why you are wrapping your executeQuery in a function.
The data will be part of the response so you can get it like this:
const {data, loading} = executeQuery({
variables: {
"query": {
"state": "CREATED",
"taskDefinitionId": "something"
}
}
})
// may also need to check for the error state
if(loading){
console.log("Loading...")
}else{
/// the ids seem to be an array of objects
const ids = data.tasks.map((task)=> task.id)
console.log(ids)
}
For anyone who may have the same problem, I realized it is a caching error happening in apollo client. I couldn't figure out the solution. However, I temporarily solved it by downgrading the apollo client dependency to version 3.2.5
This is not an authentication error, write is enabled on the database rules.
My cloud Firestore database looks like the picture below.
There is a COLLECTION called colA, inside it there is a DOCUMENT called docA, and inside it there are some fields (strings) stored.
On Postman, if I do GET https://firestore.googleapis.com/v1/projects/eletronica-ab6b1/databases/(default)/documents/colA/docA, I do receive the following answer, and it is correct:
{
"name": "projects/eletronica-ab6b1/databases/(default)/documents/colA/docA",
"fields": {
"fieldB": {
"stringValue": "ABCD"
},
"fieldA": {
"stringValue": "888"
}
},
"createTime": "2020-01-31T16:48:26.859181Z",
"updateTime": "2020-02-05T19:21:49.654340Z"
}
Now, when I try to write a new field (fieldC) via POST https://firestore.googleapis.com/v1/projects/eletronica-ab6b1/databases/(default)/documents/colA/docA, with JSON content:
{
"name": "projects/eletronica-ab6b1/databases/(default)/documents/colA/docA",
"fields": {
"fieldC": {
"stringValue": "1000"
}
}
}
After SEND, I receive this:
{
"error": {
"code": 400,
"message": "Document parent name \"projects/eletronica-ab6b1/databases/(default)/documents/colA\" lacks \"/\" at index 60.",
"status": "INVALID_ARGUMENT"
}
}
What I'm doing wrong? I really would like to write strings there via REST API.
Regards.
Updating a document is done with a PATCH request, according to the [reference documentation).
A POST request is used to create a new document in a collection, which probably explains the error you get: you're pointing to a document, but POST expects a collection path.
how do I display an image whose path is in a json fake server? Data in json file looks like:
"packages": [
{
...
"images": [
"https://i.ibb.co/g7FWSYv/a.jpg",
"https://i.ibb.co/hX3xQ5K/b.jpg",
"https://i.ibb.co/68TdBNs/c.jpg"
],
...
},
]
I am using a v-for loop to display data
<v-col v-for="(package, index) in packages" :key="index">
<v-img :src="package.images[0]" ></v-img>
</v-col>
Here is my javascript:
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
export default {
data () {
return {
packages: [],
}
},
created () {
this.initialize()
},
methods: {
initialize () {
axios.get('http://localhost:4000/packages', {})
.then(response => {
this.packages = response.data
})
}
}
}
But the image is not getting displayed. I am getting an error in the console:
TypeError: Cannot read property '0' of undefined
response.data is correct. It is showing the images array with 3 elements.
Can anyone help me?
I have changed my json slightly:
"images": [
{ "src": "https://i.ibb.co/g7FWSYv/a.jpg"},
{ "src": "https://i.ibb.co/hX3xQ5K/b.jpg" },
{ "src": "https://i.ibb.co/68TdBNs/c.jpg"}
],
and changed the code as:
<v-img :src="package.images[0].src"></v-img>
Still I am getting the same error in console.log()
it depends on the data structure of response.data if it's an array of objects that contains images field as an array of images links, then your code should work.
if response.data is a single object (which I presume) that contains images array then TypeError: Cannot read property '0' of undefined will be rised, in this case you don't need a loop to show your 0 indexed images, just
<v-img v-if="packages.images" :src="packages.images[0]" ></v-img>
I am trying to delete record from db.json through JSON server delete endpoint. db.json content is like below:
{
"todoList": [{
"todoText": "Second todo",
"key": "2"
}, {
"todoText": "Third todo",
"key": "3"
}]
}
I tried following code but it is not working. i get 404 error.
const resp = await axios.delete('http://localhost:3001/todoList?key=3') OR
const resp = await axios.delete('http://localhost:3001/todoList/', {
params: { "key": key }
})
following works if i add id property in above json (with same value like key):
await axios.delete('http://localhost:3001/todoList/' + key)
Is there a way to make it working without id property?
I have an API response from a REST API server which I called using my REACT + Apollo with apollo-link-rest. but the response of the API looks like this
[
[
{
"name": "joe"
"address": "123 street hello city"
},
{
"name": "joe2"
"address": "1233 street2 hello2 city"
}
],
2356
]
How can I create a query with this kind of response that has an array with a number as a last item in the array and the first item of the array consist of list of users?
So far I just have this query.
const QueryTest = gql`
query people {
people #rest(type: "People", path: "/allpersons")
}
`;
1st: you need name and address props within (inside) people query - 'ask for what you need' - to get results.
2nd: Work with apollo-link-rest usually needs type patching - technique used to adapt/transform existing (REST) responses to the current needs (structures). It can be combined with response transformer but this step isn't required.
Sometimes you need to add id (calculated from other fields, unique) for nested types (apollo normalizing cache requirement) or define additional 'response type' above desired/required type - google for type patching examples (f.e. patchDeeper usage) or tutorials... define patchers, use debugger...
It's far easier when you know what to expect/what is needed - compare responses with working graphql responses.
Had the same issue, you can use responseTransformer in your link to transform the response.
const restLink = new RestLink({
uri: '...',
responseTransformer: async response =>
response.json()
.then((data: any) => {
if (Array.isArray(data)) return { data }
else return data
})
});
So you should be able to use the query like this:
const QueryTest = gql`
query people {
people #rest(type: "People", path: "/allpersons") {
data
}
}
`;
Where data would contain:
[
[
{
"name": "joe"
"address": "123 street hello city"
},
{
"name": "joe2"
"address": "1233 street2 hello2 city"
}
],
2356
]