oorestisime / gatsby-source-instagram Goto Github PK

View Code? Open in Web Editor NEW

146.0 146.0 51.0 1.46 MB

Create nodes from instagram posts hashtags and profiles

Home Page: https://gatsby-src-instagram.netlify.com/

License: MIT License

JavaScript 100.00%

gatsby-source-instagram's People

Contributors

Stargazers

Watchers

gatsby-source-instagram's Issues

Experiment with the instagram api (REST and graphql)

Right now plugin only supports web scraping and fetching instagram posts

It could be nice to have a way to interact with the instagram api to fetch posts (and or other things it can provide). I think that this should be optional and keep the current functionnality untouched.

Use plugin sharp for profile picture

With the addition of InstaUserNode user can get public user profile. There is a profile picture we could use plugin sharp on.
To do this, the normalizer needs to get updated to take in parameters the path of node to use for downloading the remote content.

Cannot read property 'edge_owner_to_timeline_media'

Getting an issue with version 0.8.0 when building, both on Gatsby Cloud and locally. 0.7.0 works fine but it looks like Gatsby Cloud enforces the latest version of a plugin?

I've tried several Instagram accounts

Could not fetch instagram posts. Error status TypeError: Cannot read property 'edge_owner_to_timeline_media' of null

Use maxPosts for scraping method

It looks like the scraping method is not using the maxPosts config. It's currently hard coded to 100:

gatsby-source-instagram/src/instagram.js

Lines 5 to 8 in 8e104fb

 return axios 

 .get( 

 `https://instagram.com/graphql/query/?query_id=17888483320059182&variables={"id":"${username}","first":100,"after":null}` 

 )

Can we use the maxPosts config here?

Input File Missing When Queried

I understand that instagram images are being cached however the the cache folder uses an absolute path. When i build on netlify the query fails because it cant find the image and that is due to cache folders path. Is there any changes that can be made so that it is relative or i can turn off the cache option. Any help is appreciated, thanks!

ERROR SHOWN

error Failed to retrieve metadata from image /Users/Charles/Desktop/career/Client Projects/Perez Fitness/site/.cache/caches/gatsby-source-instagram/dfdfdb524d1e53a35ec7350acaf03191/58410853_169523687384295_8229251386197029619_n.jpg Input file is missing
1:18:56 PM:
1:18:56 PM: Error: Input file is missing
1:18:56 PM:
1:18:56 PM: not finished run queries - 19.521s
1:18:56 PM: not finished Generating image thumbnails - 19.493s

Trying to filter thumbnail data

Trying to filter thumbnail data so that it only returns images with width: 480. This is what I have so far:

{
allInstaNode(
limit: 10
filter: {thumbnails: {elemMatch: {config_width: {eq: 480}}}}
) {
edges {
node {
thumbnails {
src
config_width
}
}
}
}
}

Any ideas why that is not giving me my desired filtered data?

Expose Video format url

Really enjoying how easy and straight forward this plugin is to use. I am having some trouble, however, trying to access video content.

For example, I can query my recent posts and see that there are video types there with

{
  allInstaNode {
    edges {
      node {
        mediaType
      }
    }
  }
}

When exploring its available data in the GraqhiQL editor tho, I'm not able to find any URL or localFile that points to any mp4 or other video format files. It would be nice to expose this feature.

Inject ID to hyperlink of Instagram Post

I'm trying to add hyperlinks to each IG post, but am having issues injecting the post id to the link. So far I've had variations of the following but nothing works:

<a href='https://www.instagram.com/p/{node.id}>

Any chance you could include a node which includes the full link to each post?

Posts only update on build/restart

Is there a way to query/scrape IG when the page loads in order to always see the latest posts?Right now the only way to get new posts is restarting gatsby develop or running gatsby build. Will using the IG Graph API accomplish this? It seems like a lot of trouble to go through to get a token just to display the last 6 Instagram posts on my site so I've held off and am using the scraper for now. Thanks!

Edit: is there a way to use the React component lifecycle (ie componentDidMount) for this?

Failing on Netlify builds, why?

I use Netlify with Gatsby and while this plugin used to work I now get a Netlify error saying "cannot query allInstaNode" on "Query". Must be related, but I see on your Github page that Netlify build is failing for this plugin. Are you aware? Is there a fix? Thanks.

Problems with using the Instagram Graph API

I am building for my employer an Instagram fetch component on his website. The latest eight images of the company's Instagram profile are fetched and included on the website. As the whole website is a Gatsby project, I wanted to use the gatsby-source-instagram plugin.
Since a while, I get the warning: Could not get instagram posts using the Graph API. Error status Error: Request failed with status code 400. Then, it falls back to public scraping. So far, so good. When the website is built on Netlify, this fails. This is my error message:
Could not get instagram posts using the Graph API. Error status Error: Request failed with status code 400 Falling back to public scraping... with (name of the profile) Could not fetch instagram posts. Error status TypeError: Cannot read property '0' of undefined The gatsby-source-instagram plugin has generated no Gatsby nodes. Do you need it? and later:
error There was an error in your GraphQL query: Cannot query field "allInstaNode" on type "Query".
If I am right, fetching the posts fails for the Graph API request as well as for public scraping. Thus, allInstaNodes is not there and it fails on a server. Locally, only public scraping works.
This is my request:
import { useStaticQuery, graphql } from "gatsby" export const useInstaNode = () => { const { allInstaNode } = useStaticQuery( graphql
query InstaPosts {
allInstaNode(filter: { mediaType: { eq: "GraphImage" } }, limit: 8) {
edges {
node {
id
mediaType
timestamp
caption
localFile {
childImageSharp {
fluid(maxWidth: 290) {
...GatsbyImageSharpFluid
}
}
}
}
}
}
}
) return allInstaNode }
In my gatsby-config.js, I provided username, access_token, and instagram_id. gatsby-source-instagram is v0.7.0 and gatsby is v2.19.10. Can anybody help me that my request is working also on a server?

sourced image URL expires after a few days

I use the plugin to get URLs of IG images which I then show in my static page. The problem is that after a while they stop loading and their response is "URL signature expired" (I use allInstaNodes.edges.map( (e)=> ... <img src={e.node.thumbnails.src}...

possible solutions

save images to the build folder and serve it statically with the build
use different URL while loading? e.g. https://stackoverflow.com/a/53750300/4114514

Cannot run with gatsby-starter-default

I was getting some weird errors when adding gatsby-source-instagram to my project, so I tried it with the default starter.

Just adding it to the plugins list is enough to trigger it:

npx gatsby-cli new my-default-project https://github.com/gatsbyjs/gatsby-starter-default#v2
yarn add gatsby-source-instagram

And in gatsby-config.js:

{
  resolve: `gatsby-source-instagram`,
    options: {
      username: `instagram`,
    },
},

Throws:

λ yarn run develop
yarn run v1.3.2
(node:9132) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
$ gatsby develop
success open and validate gatsby-config — 0.011 s
success load plugins — 0.272 s
error Plugin gatsby-source-instagram returned an error


  ReferenceError: regeneratorRuntime is not defined

  - gatsby-node.js:53
    [my-default-project]/[gatsby-source-instagram]/gatsby-node.js:53:3

  - gatsby-node.js:83 Object.<anonymous>
    [my-default-project]/[gatsby-source-instagram]/gatsby-node.js:83:2

  - v8-compile-cache.js:178 Module._compile
    [my-default-project]/[v8-compile-cache]/v8-compile-cache.js:178:30

  - loader.js:700 Object.Module._extensions..js
    internal/modules/cjs/loader.js:700:10

  - loader.js:599 Module.load
    internal/modules/cjs/loader.js:599:32

  - loader.js:538 tryModuleLoad
    internal/modules/cjs/loader.js:538:12

  - loader.js:530 Function.Module._load
    internal/modules/cjs/loader.js:530:3

  - loader.js:637 Module.require
    internal/modules/cjs/loader.js:637:17

  - v8-compile-cache.js:159 require
    [my-default-project]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - api-runner-node.js:74 runAPI
    [my-default-project]/[gatsby]/dist/utils/api-runner-node.js:74:22

  - api-runner-node.js:247 Promise.mapSeries.plugin
    [my-default-project]/[gatsby]/dist/utils/api-runner-node.js:247:32

  - util.js:16 tryCatcher
    [my-default-project]/[bluebird]/js/release/util.js:16:23

  - reduce.js:155 Object.gotValue
    [my-default-project]/[bluebird]/js/release/reduce.js:155:18

  - reduce.js:144 Object.gotAccum
    [my-default-project]/[bluebird]/js/release/reduce.js:144:25

  - util.js:16 Object.tryCatcher
    [my-default-project]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [my-default-project]/[bluebird]/js/release/promise.js:512:31


error Cannot read property 'filter' of undefined


  TypeError: Cannot read property 'filter' of undefined

  - api-runner-node.js:274 Promise.mapSeries.catch.then.results
    [my-default-project]/[gatsby]/dist/utils/api-runner-node.js:274:42

  - util.js:16 tryCatcher
    [my-default-project]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [my-default-project]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [my-default-project]/[bluebird]/js/release/promise.js:569:18

  - promise.js:614 Promise._settlePromise0
    [my-default-project]/[bluebird]/js/release/promise.js:614:10

  - promise.js:694 Promise._settlePromises
    [my-default-project]/[bluebird]/js/release/promise.js:694:18

  - async.js:138 _drainQueueStep
    [my-default-project]/[bluebird]/js/release/async.js:138:12

  - async.js:131 _drainQueue
    [my-default-project]/[bluebird]/js/release/async.js:131:9

  - async.js:147 Async._drainQueues
    [my-default-project]/[bluebird]/js/release/async.js:147:5

  - async.js:17 Immediate.Async.drainQueues [as _onImmediate]
    [my-default-project]/[bluebird]/js/release/async.js:17:14


error UNHANDLED REJECTION


  TypeError: Cannot read property 'filter' of undefined

  - api-runner-node.js:274 Promise.mapSeries.catch.then.results
    [my-default-project]/[gatsby]/dist/utils/api-runner-node.js:274:42

  - util.js:16 tryCatcher
    [my-default-project]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [my-default-project]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [my-default-project]/[bluebird]/js/release/promise.js:569:18

  - promise.js:614 Promise._settlePromise0
    [my-default-project]/[bluebird]/js/release/promise.js:614:10

  - promise.js:694 Promise._settlePromises
    [my-default-project]/[bluebird]/js/release/promise.js:694:18

  - async.js:138 _drainQueueStep
    [my-default-project]/[bluebird]/js/release/async.js:138:12

  - async.js:131 _drainQueue
    [my-default-project]/[bluebird]/js/release/async.js:131:9

  - async.js:147 Async._drainQueues
    [my-default-project]/[bluebird]/js/release/async.js:147:5

  - async.js:17 Immediate.Async.drainQueues [as _onImmediate]
    [my-default-project]/[bluebird]/js/release/async.js:17:14


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Am I doing something wrong? There seems to be a similar error in gatsbyjs/gatsby#1818

Stuck with steps to create Instagram Graph API token

When I follow the steps to create an Instagram Graph API token I get stuck with step 6.
After the get request I get the following response:

(#100) Page Public Metadata Access requires either app secret proof or an app token

I'm not sure what mistake I have made.

Images load in arbitrary order

I'm using the public scraping method but the images doesn't seem to load in a chronological order, which makes it hard to limit the amount of nodes already in the graphql-query.

My goal is to receive the three latest images from an instagram account. Is there any way to achieve this? Or do I have to load 12 images, sort them and then iterate? (Which is what I did now)

Thanks!

Integration with gatsby-image

While having the thumbnail urls is great, I'd love to use the full image as source for gatsby-image (specially because of lazy-load and avoiding company firewalls blocking instagram urls on visitors).

Apparently gatsby-source-contentful and gatsby-source-datocms already do something similar.

I'm new at gatsby and its plugins, but it seems conceivable. Would a PR for this be welcome? Any pointers on how I should get started?

Cannot read property 'next' of undefined

Just set-up a new Facebook and Instagram Business account, generated the Facebook Graph API access token with scoped permissions as described in the README and saw the above error in development. I suspected it was due to not having any Instagram images yet and I was right. Dropping this in here for posterity. Case closed.

Use current plugin source in the example project instead of released

Right now the example project references the latest released plugin. This makes it hard on development because i can't see a preview at netlify.

Graphql error: Cannot query 'allInstaNode' on type 'Query'

My guess would be that Instagram changed their API and/or markup and it cause gatsby-source-instagram to break. The error:

GraphQL Error Encountered 1 error(s):
- Unknown field 'allInstaNode' on type 'Query'.

Inside GraphiQL on localhost:8000/__graphql, 'allInstaNode' field doesn't exist.

Unknown field 'allInstaNode' on type 'Query'

Hello

Today my gatsby builds started crashing with this error :

GraphQL Error Encountered 1 error(s):

- Unknown field 'allInstaNode' on type 'Query'.

It looks like it is the same problem as in #42

But I don't know what changed in their markup.

I'm using the version 0.5.1.

Error when getting permanent page access token in Graph API Explorer

When I follow the Instagram Graph API token instructions, I get stuck at step 6 ii)

Make a GET request with "PAGE_ID?fields=access_token"

The GET request returns the following error:

{
  "error": {
    "message": "(#100) Page Public Metadata Access requires either app secret proof or an app token",
    "type": "OAuthException",
    "code": 100,
    "fbtrace_id": "Ai90-u47JI4T4pGEG8aCkwq"
  }
}

I have tried restarting the instructions from scratch a couple of times to double check and I get the same error each time. Is there something I could be missing?

Discussion: Deprecation of the Instagram legacy API

I found out that Instagram is deprecating their legacy API on March 31, 2020. Would this affect how this plugin works?

If so, looks like we'll have to migrate to the Basic Display API. The User Token Generator generates a token that is valid for 60 days before having to be refreshed, and can only be used with accounts you know the credentials to.

Query Children in CAROUSEL_ALBUM

Is it possible to query children in the CAROUSEL_ALBUM mediaType?

When I view the JSON in a web browser it returns an array of children (images, videos, etc.), however, when I query via GraphiQL the children nodes are blank.

Why no post description/text data?

Why is the Instagram post text/description not an included field? Is that data not provided by the Instagram API?

I'm working on a project that the designer included IG post text in. Any thoughts on how I might retrieve that data for my component?

Getting instagram ID

In the 0.8 release notes, the tool for getting your numeric Instagram ID doesn't seem to work.

I found this one after hunting around.

https://www.instafollowers.co/find-instagram-user-id

Hope this helps!

Hashtag Graph API function doesn't work

I don't see the new hashtag function developed by @joelmturner in #164 working for me.

data seems simply not to be fetched.

ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "hashtags" on type "InstaNode".

If you don't expect "hashtags" to exist on the type "InstaNode" it is most likely a typo.
However, if you expect "hashtags" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "hashtags" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add at least one entry with
that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema
 for "InstaNode":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

Query same as in the example provided

  query IndexQuery {
    allInstaNode(limit: 30) {
      edges {
        node {
          id
          username
          likes
          caption
          comments
          hashtags
          localFile {
            childImageSharp {
              fluid(quality: 100, maxWidth: 600, maxHeight: 600) {
                ...GatsbyImageSharpFluid_withWebp_tracedSVG
              }
            }
          }
        }
      }
    }
  }

Plugin config

    {
      resolve: `gatsby-source-instagram`,
      options: {
        username: ###########,
        instagram_id: ############,
        access_token: process.env.FB_ACCESS_KEY,
        hashtags: { // hashtags: true // neither works
          enabled: true,
          commentDepth: 0
        }
      }
    },

User content is pulled correctly without specifying hashtags.

Am I doing anything wrong here?

childImageSharp

Hello,

Is it possible to use the childImageSharp fluid rather than fixed with this plugin?

Hashtag scraping

Hey thanks so much for creating this, I was about to start messing with IG and Gatsby yesterday, but IG went down (Thankfully).

I want to see if there's a way to scrape hashtags instead of the username for example. I want to pull all the posts that contain certain hashtag.

Thank you!

Public scraping methods fail due to login screen on Instagram on production builds

I use this plugin in my demo and could not work, it says could not fetch instagram posts, no Gatsby nodes generated(I did't use any token and just want to Public scraping for posts). So I cloned your repo, cd into /example, yarn install and run 'npm run develop'. And then it seems like the same problem happened. Wonder to know if i am missing something? Thanks!

The gatsby-source-instagram plugin has generated no Gatsby nodes. Do you need it?

https://www.dropbox.com/s/q7sndki1myhr2ax/Screenshot%202020-06-01%2007.57.44.png?dl=0

Locally, the plugin works great, no warnings. Building locally also succeeds.
When trying to deploy to vercel the build command fails with the above message.

Thanks!

Could the plugin cache posts to accelerate dev builds?

When I build the site, it goes and download all related posts again... could this be cached so if post has not changed, it can use the cached version.
Mostly, to cache the images locally.

Add optional limit and sorting parameters in the graph api configuration

For now the graphapi will get all the results or at least those on the first page.

Should be easy to add a limit and sort option and make sure that paginated results are also recovered.

Hashtag stored as username in GraphQL

I use this plugin to scrape IG for one specific hashtag. It works like a charm, however it seems that the search term gets stored as the image's username as well. I.E, when I scrape for posts with hashtag kitten, the resulting nodes will have username kitten as well instead of the actual username. I tried to find where this goes wrong but as far as I can tell the retrieved data is all correct so it's likely storing the nodes to GraphQL that doesn't go as it should.

Gatsby builds are failing for Profile

https://app.netlify.com/sites/gatsby-src-instagram/deploys

https://gatsby-src-instagram.netlify.app/profile

The other features seem to be working but Profile is failing on Gatsby build (it works on my local env).

Debug why Images are retrieved at every develop even if in cache

I think images are in cache but the assertion for this cause is not working properly hence retrieving every time the images from instagram

Public scraping returns "Cannot read property '0' of undefined"

As of today I cannot fetch Instagram data with the public method. I have not made any changes to my code which has been working great the last month. When running gatsby develop I get this warning:

warn Could not fetch instagram posts. Error status TypeError: Cannot read property '0' of undefined

Take an array as options

Right now if user needs more than one profile or hashtag or.. they need to add the plugin multiple times in the configuration.
The plugin could take an object or an array of objects to improve the options declaration. Handling both cases would help avoid a breaking change.

Dynamic username

In my case the username is dynamic, right now it pulls the username from the config. Is it possible to use a dynamic username based on a query?

error Cannot query field "allInstaNode" on type "Query" at Gatsby 2.8.15

From Gatsby 2.8.15 plugin fails with:

error Cannot query field "allInstaNode" on type "Query"

Issues with dependencies `@babel/preset-env`, `@babel/runtime`, `gatsby-source-filesystem`

Thanks a lot for this plugin, it's really convenient to use 👍

https://sandycroes.be/ 🙂

`@babel/preset-env`

@babel/preset-env gives a lot, like really a lot, of installation warnings.

warning "gatsby-source-instagram > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "gatsby-source-instagram > @babel/preset-env > @babel/plugin-proposal-unicode-property-regex > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0".

This is I assume already fixed with #71. I'd love it if this could be published.

`@babel/runtime`

I don't see this being used in the code. If I'm not missing something, this could be removed.

`gatsby-source-filesystem`

This would be better off as a peerDependency instead. Most Gatsby sites come with the right version installed already anyway.

I can use version 0.6.1, but not 0.9.0 (Cannot query field "allInstaNode" on type "Query") [Gatsby 2.27.0]

I was struggling to use gatsby-source-instagram in my project (or in a fresh Gatsby project), but I was able to run it in a starter I found.

I eventually was able to resolve my issues by downgrading the version to the one that the starter uses, which is enough for me, but I wanted to report the problem.

In a fresh project, I'm doing:

gatsby new clean-starter https://github.com/gatsbyjs/gatsby-starter-default
cd clean-starter
npm install --save gatsby-source-instagram
<edit config to add the plugin to gatsby>
gatsby develop

The result is Cannot query field "allInstaNode" on type "Query" if I try to use allInstaNode in useStaticQuery. I also can't use it in the GraphiQL console. Downgrading resolves that.

I'm using Gatsby 2.27.0. Let me know if you need me to reproduce it or provide any other details.

The gatsby-source-instagram plugin has generated no Gatsby nodes

I didn't have any issues with the initial installation, everything was running fine. I restarted my server and received the following message in my terminal: warning The gatsby-source-instagram plugin has generated no Gatsby nodes. Do you need it?

I checked graphQL and no nodes are populating. Any clue what could have caused this to happen?

Scraping broken

I'm getting the following error since this morning:

Could not fetch instagram user. Error status TypeError: Cannot read property 'ProfilePage' of undefined.

I'm guessing Instagram changed their page markup a bit which breaks the current scraping methods.

I tried to debug the issue and noticed the parseResponse function in instagram.js returns an incomplete jsonData string.

Source posts by user and hashtag

Is it possible with this plugin to source all posts from a user that contain a specific hashtag? For example, the user might be @racecars and the hashtag might be #redcars. So this would return all posts from the user @racecars with the #redcars hashtag.

Note that the user isn't an account I own.

Gatsby develop only works first time

Similar issue to what's going on here: gatsbyjs/gatsby#11109

When I run Gatsby develop I get this error:



  Error: Invariant Violation: Encountered an error trying to infer a GraphQL typ  e for: "localImage___NODE". There is no corresponding node with the id field m  atching: "ec07e826-36d4-5377-bec9-d9cefe92acb5"

  - invariant.js:40 invariant
    [samchang]/[invariant]/invariant.js:40:15

  - infer-graphql-type.js:234 validateLinkedNode
    [samchang]/[gatsby]/dist/schema/infer-graphql-type.js:234:5

  - infer-graphql-type.js:293 inferFromFieldName
    [samchang]/[gatsby]/dist/schema/infer-graphql-type.js:293:3

  - infer-graphql-type.js:359 _.each
    [samchang]/[gatsby]/dist/schema/infer-graphql-type.js:359:23

  - lodash.js:4911
    [samchang]/[lodash]/lodash.js:4911:15

  - lodash.js:2996 baseForOwn
    [samchang]/[lodash]/lodash.js:2996:24

  - lodash.js:4880
    [samchang]/[lodash]/lodash.js:4880:18

  - lodash.js:9344 Function.forEach
    [samchang]/[lodash]/lodash.js:9344:14

  - infer-graphql-type.js:338 _inferObjectStructureFromNodes
    [samchang]/[gatsby]/dist/schema/infer-graphql-type.js:338:5

  - infer-graphql-type.js:409 inferObjectStructureFromNodes
    [samchang]/[gatsby]/dist/schema/infer-graphql-type.js:409:10

  - build-node-types.js:138 inferFields
    [samchang]/[gatsby]/dist/schema/build-node-types.js:138:26

  - build-node-types.js:187 fields
    [samchang]/[gatsby]/dist/schema/build-node-types.js:187:19

  - Array.forEach

  - Array.forEach


error UNHANDLED REJECTION


  Error: Invariant Violation: Encountered an error trying to infer a GraphQL typ  e for: "localImage___NODE". There is no corresponding node with the id field m  atching: "ec07e826-36d4-5377-bec9-d9cefe92acb5"

  - invariant.js:40 invariant
    [samchang]/[invariant]/invariant.js:40:15

  - infer-graphql-type.js:234 validateLinkedNode
    [samchang]/[gatsby]/dist/schema/infer-graphql-type.js:234:5

  - infer-graphql-type.js:293 inferFromFieldName
    [samchang]/[gatsby]/dist/schema/infer-graphql-type.js:293:3

  - infer-graphql-type.js:359 _.each
    [samchang]/[gatsby]/dist/schema/infer-graphql-type.js:359:23

  - lodash.js:4911
    [samchang]/[lodash]/lodash.js:4911:15

  - lodash.js:2996 baseForOwn
    [samchang]/[lodash]/lodash.js:2996:24

  - lodash.js:4880
    [samchang]/[lodash]/lodash.js:4880:18

  - lodash.js:9344 Function.forEach
    [samchang]/[lodash]/lodash.js:9344:14

  - infer-graphql-type.js:338 _inferObjectStructureFromNodes
    [samchang]/[gatsby]/dist/schema/infer-graphql-type.js:338:5

  - infer-graphql-type.js:409 inferObjectStructureFromNodes
    [samchang]/[gatsby]/dist/schema/infer-graphql-type.js:409:10

  - build-node-types.js:138 inferFields
    [samchang]/[gatsby]/dist/schema/build-node-types.js:138:26

  - build-node-types.js:187 fields
    [samchang]/[gatsby]/dist/schema/build-node-types.js:187:19

  - Array.forEach

  - Array.forEach

But when I delete the cache folder and run Gatsby develop again or completely stopped running Gatsby-source-Instagram things seem to work.

Server build not getting profile page data

When building locally the data is gathered correctly, but when our build server tries to scrape the profile page data from instagram we get this as the response:
{"LoginAndSignupPage":[{"captcha":{"enabled":false,"key":""},"gdpr_required":false,"tos_version":"row","username_hint":""}]}
any way to get past this? The profile is public. This only started happening a few days ago and was only every now and then. Today it seems to be every time when building from the server.

How to dynamically load new images

Hi,
I have used this plugin with my website and it works fine. But it only queries the posts at build time, when the page is built, new images posted after build time are not fetched.
Is there a way to do this dynamically?
Thanks

Multiple Instagram Accounts

How can I pass multiple usernames into the plugin? Can the user name be a list of names or maybe a variable that I can access from a template?

    {
       resolve: 'gatsby-source-instagram',
       options: {
         username: nameOfUser
       },
     },

I need to show different instagram data depending on the slug...

  query artistQuery($slug: String!) {
    allInstaNode {
      edges {
       node {
         id
         likes
         comments
         mediaType
         preview
         original
         timestamp
         caption
         localFile {
           childImageSharp {
             fixed(width: 150, height: 150) {
               ...GatsbyImageSharpFixed
             }
           }
         }
        }
      }
    }
  }

comments always null

Hi,

I'm using the scraping method and it seems to work fine, however the "comments" field always returns null.
Let me know what other information would be helpful.
Thanks!

manage_pages not available in Graph API Explorer

When I try to follow the steps to get an access token for this plugin, I get stuck by adding the manage_pages permission. It seems that it's not available. Maybe they removed it?

	return axios
	.get(
	`https://instagram.com/graphql/query/?query_id=17888483320059182&variables={"id":"${username}","first":100,"after":null}`
	)

oorestisime / gatsby-source-instagram Goto Github PK

gatsby-source-instagram's People

Contributors

Stargazers

Watchers

Forkers

gatsby-source-instagram's Issues

@babel/preset-env

@babel/runtime

gatsby-source-filesystem

Recommend Projects

Recommend Topics

Recommend Org

Jobs

`@babel/preset-env`

`@babel/runtime`

`gatsby-source-filesystem`