问题
I want to display the data of an article using gatsby-source-facebook. But I don't know how to write a query. I can't find the best query at http://localhost:8000/___graphql
I make a simple website with gatsby.js
.
I want to get facebook article data (posting date and text) and display it on the site.
I installed gatsby-source-facebook
for that.
And changed gatsby-config.js
.
→ https://www.gatsbyjs.org/packages/gatsby-source-facebook/
//`gatsby-config.js`
plugins: [
{
resolve: `gatsby-source-facebook`,
options: {
places: [`${facebookPageID}`], // Can be either a numeric ID or the URL ID
params: {
fields: 'hours, posts { message, created_time }', // See Facebooks API to see what you can query for
},
key: process.env.FACEBOOK_GRAPH_TOKEN, // You will need to create a Facebook application and go through review in order to get an API token.
},
},
],
I don't know how to write a query, so I can't get the data. (Can not be displayed.) For example, http://localhost:8000/___graphql
query {
site {
siteMetadata {
title
description
}
}
}
If you enter and execute}, the title and description of the site set in gatsby-config.js
enter code here will be displayed. This is normal. So how do you write a query to display facebook article data?
I searched a lot to solve this problem, but I didn't find a solution. I only found a similar question (How to add facebook comment plugin in Gatsby?) but it could not be resolved. This question was the same as what I wrote here (https://www.gatsbyjs.org/packages/gatsby-source-facebook/).
回答1:
tl;dr:
Try this:
query {
allFacebookArticles {
edges {
node {
title,
description
}
}
}
}
Explanation
That plugin stores its data into types matching the format Facebook${type} where $type
is the type of thing you're pulling (in your case, articles, so it'd be FacebookArticle
).
From GraphiQL, though, you should be able to see that on the sidebar on the left.
Here's an example from my current project (with some other options open):
来源:https://stackoverflow.com/questions/57753265/i-want-to-display-articles-using-gatsby-source-facebook