Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.gatsbyjs.com/docs/reference/graphql-data-layer/graphql-api/ below:

Website Navigation

• Docs
•   Docs

GraphQL API | Gatsby

A great advantage of Gatsby is a built-in data layer that combines all data sources you configure. Data is collected at build time and automatically assembled into a schema that defines how data can be queried throughout your site.

This doc serves as a reference for GraphQL features built into Gatsby, including methods for querying and sourcing data, and customizing GraphQL for your site’s needs.

GraphQL is available in Gatsby without a special install: a schema is automatically inferred and created when you run gatsby develop or gatsby build. When the site compiles, the data layer can be explored at: http://localhost:8000/___graphql

Data needs to be sourced — or added to the GraphQL schema — to be queried and pulled into pages using GraphQL. Gatsby uses source plugins to pull in data.

Please note: GraphQL isn’t required, you can still use Gatsby without GraphQL.

To source data with an existing plugin you have to install all needed packages. Furthermore you have to add the plugin to the plugins array in the gatsby-config with any optional configurations. If you want to source data from the filesystem for use with GraphQL, such as Markdown files, images, and more, refer to the filesystem data sourcing docs.

For instructions on installing plugins from npm, take a look at the instructions in the docs on using a plugin.

You can also create custom plugins to fit your own use cases and pull in data however you want.

Data can be queried inside pages, components, or the gatsby-node.js file, using one of these options:

• The pageQuery component
• The useStaticQuery hook

Note: Because of how Gatsby processes GraphQL queries, you can’t mix page queries and static queries in the same file. You also can’t have multiple page queries or static queries in one file.

For information on page and non-page components as they relate to queries, check out the docs guide on building with components

pageQuery is a built-in component that retrieves information from the data layer in Gatsby pages. You can have one page query per page. It can take GraphQL arguments for variables in your queries.

A page is made in Gatsby by any React component in the src/pages folder, or by calling the createPage action and using a component in the createPage options — meaning a pageQuery won’t work in any component, only in components which meet this criteria.

Also, refer to the guide on querying data in pages with page query.

A page query isn’t a method, but rather an exported variable that’s assigned a graphql string and a valid query block as its value:

Note: the query exported in a const doesn’t need to be named pageQuery. More importantly, Gatsby looks for an exported graphql string from the file.

When included in a page component file, a page query returns a data object that is passed automatically to the component as a prop.

The useStaticQuery hook can be used in any component or page.

Because it is a React hook, the rules of hooks apply. Because of how queries currently work in Gatsby, only one instance of useStaticQuery is supported in each file.

Also, refer to the guide on querying data in components with useStaticQuery.

The useStaticQuery hook takes one argument:

• query: a graphql query string

The useStaticQuery hook returns data in an object:

Queries are written in the same shape you want data returned in. How you source data will determine the names of fields that you can query on, based on the nodes they add to the GraphQL schema.

For understanding the parts of a query refer to the conceptual guide.

GraphQL queries can take arguments to alter how the data is returned. The logic for these arguments is handled internally by Gatsby. Arguments can be passed into fields at any level of the query.

Different nodes can take different arguments based off of the nature of the node.

The arguments you can pass to collections (like arrays or long lists of data - ex. allFile, or allMdx) are:

• filter
• limit
• sort
• skip

The arguments you can pass to a date field are:

• formatString
• locale

The arguments you can pass to an excerpt field are:

• pruneLength
• truncate

Other built-in configurations can be used in queries

• Alias
• Group

For examples, refer to the GraphQL query options reference guide.

Fragments allow you to reuse parts of GraphQL queries. They also allow you to split up complex queries into smaller, easier to understand components.

For more information, check out the docs guide on using fragments in Gatsby.

Some fragments come included in Gatsby plugins, such as fragments for returning optimized image data in various formats with gatsby-image and gatsby-transformer-sharp, or data fragments with gatsby-source-contentful. For more information on what plugins include fragments, see the gatsby-image README.

You can customize sourced data in the GraphQL layer and create relationships between nodes with the Gatsby Node APIs.

The GraphQL schema can be customized for more advanced use cases: read more about it in the schema customization API docs.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4