So I'm completely new to GraphQL, could anyone tell me how to change below code into retrieving only public repos from my account?
I tried to use "search" attribute but I can't get it working.
Thanks
const {
github: {
repositoryOwner: {
repositories: { edges },
},
},
} = useStaticQuery(graphql`
{
github {
repositoryOwner(login: "SzBor") {
repositories(first: 6, orderBy: { field: CREATED_AT, direction: ASC }) {
edges {
node {
id
name
url
description
}
}
}
}
}
}
`)
you can use the arguments privacy: PUBLICon repositories Ex:
const {
github: {
repositoryOwner: {
repositories: { edges },
},
},
} = useStaticQuery(graphql`
{
github {
repositoryOwner(login: "SzBor") {
repositories(first: 6, privacy: PUBLIC, orderBy: { field: CREATED_AT, direction: ASC }) {
edges {
node {
id
name
url
description
}
}
}
}
}
}
`)
The stranger is that the (API V4 document) is not updated with this information, but you can test on explorer :)
Related
I am getting error when deploy on netlify:
10:49:33 AM: error There was an error in your GraphQL query: 10:49:33
AM: Field "cover" must not have a selection since type "String" has no
subfields. 10:49:33 AM: This can happen if you e.g. accidentally added
{ } to the field "cover". If you didn't expect "cover" to be of type
"String" make sure that your input source and/or plugin is correct.
failed extract queries from components - 0.355s
Here is my following code:
export const pageQuery = graphql`
{
hero: allMarkdownRemark(filter: { fileAbsolutePath: { regex: "/hero/" } }) {
edges {
node {
frontmatter {
title
name
subtitle
buttonText
}
html
}
}
}
about: allMarkdownRemark(filter: { fileAbsolutePath: { regex: "/about/" } }) {
edges {
node {
frontmatter {
title
avatar {
childImageSharp {
fluid(maxWidth: 700, quality: 90, traceSVG: { color: "#64ffda" }) {
...GatsbyImageSharpFluid_withWebp_tracedSVG
base64
}
}
}
skills
}
html
}
}
}
jobs: allMarkdownRemark(
filter: { fileAbsolutePath: { regex: "/jobs/" } }
sort: { fields: [frontmatter___date], order: DESC }
) {
edges {
node {
frontmatter {
title
company
location
range
url
}
html
}
}
}
featured: allMarkdownRemark(
filter: { fileAbsolutePath: { regex: "/featured/" } }
sort: { fields: [frontmatter___date], order: DESC }
) {
edges {
node {
frontmatter {
title
cover {
childImageSharp {
fluid(maxWidth: 700, quality: 90, traceSVG: { color: "#64ffda" }) {
...GatsbyImageSharpFluid_withWebp_tracedSVG
base64
}
}
}
tech
github
external
}
html
}
}
}
projects: allMarkdownRemark(
filter: {
fileAbsolutePath: { regex: "/projects/" }
frontmatter: { showInProjects: { ne: false } }
}
sort: { fields: [frontmatter___date], order: DESC }
) {
edges {
node {
frontmatter {
title
tech
github
external
}
html
}
}
}
contact: allMarkdownRemark(filter: { fileAbsolutePath: { regex: "/contact/" } }) {
edges {
node {
frontmatter {
title
buttonText
}
html
}
}
}
}
`;
I tried to add base64 like people said when I try to search for a solution but it still giving me this error. How can I fix it?
frontmatter {
title
cover {
childImageSharp {
fluid(maxWidth: 700, quality: 90, traceSVG: { color: "#64ffda" }) {
...GatsbyImageSharpFluid_withWebp_tracedSVG
base64
}
}
}
tech
github
external
}
In this code snippet the field cover is of String type, not an object. In graphql you can not sub select for primitive data types like int, string, id, etc. So you can not access childImageSharp in cover. Check the structure of API or fix it from the back-end. Here,
frontmatter {
title
cover
tech
github
external
}
this will work
I have set up a multiple media(images) field called pictures on my project content type on Strapi and I have added 2 projects with pictures containing 4 images each.
I want to query these images in Gatsby using Graphql.
This is my plugins array in gatsby-config.js
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`,
},
},
{
resolve: `gatsby-source-strapi`,
options: {
apiURL: `http://localhost:1337`,
queryLimit: 1000,
contentTypes: [`project`],
},
}]
This is my graphql query on localhost:8000/___graphql
query MyQuery {
allStrapiProject {
nodes {
pictures {
formats {
thumbnail {
childImageSharp {
fluid {
src
}
}
}
}
}
}
}
}
This is the result I am getting
{
"data": {
"allStrapiProject": {
"nodes": [
{
"pictures": [
{
"formats": {
"thumbnail": null
}
},
{
"formats": {
"thumbnail": {
"childImageSharp": {
"fluid": {
"src": "/static/eb8a7ee6108ecc0e6185aced82c3316b/b4216/167f320a448c2d6ff65acf179ee627e2.jpg"
}
}
}
}
},
{
"formats": {
"thumbnail": null
}
},
{
"formats": {
"thumbnail": null
}
}
]
},
{
"pictures": [
{
"formats": {
"thumbnail": null
}
},
{
"formats": {
"thumbnail": null
}
},
{
"formats": {
"thumbnail": null
}
},
{
"formats": {
"thumbnail": null
}
}
]
}
]
}
}
}
All of the thumbnails contain null except for one.
I have tried running 'gatsby clean' and sometimes get the query output to have same image urls in multiple places even though i don't have repeating images on Strapi.
As of now, there is no "official" way to make it happen. But there is a workaround which creates a custom node in the build process. For a graphql query like below
query MyQuery {
allStrapiPortfolio {
edges {
node {
category {
images {
localFile {
childImageSharp {
fluid {
base64
tracedSVG
srcWebp
srcSetWebp
originalImg
originalName
}
}
}
}
}
}
}
}
}
The code given below creates the localFile node after images. The code should go in gatsby-node.js.
const { createRemoteFileNode } = require(`gatsby-source-filesystem`);
exports.onCreateNode = async ({ node, actions, store, cache }) => {
const { createNode, createNodeField } = actions;
if (node.internal.type !== null && node.internal.type === "StrapiPortfolio") {
for (const category of node.category) {
for (const image of category.images) {
console.log(image);
const fileNode = await createRemoteFileNode({
url: "http://localhost:1337" + image.url,
store,
cache,
createNode,
createNodeId: (id) => image.id.toString(),
});
if (fileNode) {
image.localFile___NODE = fileNode.id;
}
}
}
}
};
Please note that you will have to customize the code depending on your needs. In my solution, I used two for loops because of my data structure. If you're unsure or just want to check if your custom code works, you can simply add a console.log(node) before the first if statement and a console.log(image) after the second for loop(in my case). That should give you an indication about your data structure and in which way you should proceed.
You need to create a localFile___NODE.
First, you need to edit gatsby-node.js file.
const { createRemoteFileNode } = require(`gatsby-source-filesystem`)
exports.onCreateNode = async ({
node,
actions,
store,
cache,
createNodeId,
}) => {
const { createNode } = actions
// replace ".sliderHome" for the name of multiple media in Strapi CMS
let sliderImages = node.sliderHome
// replace “StrapiHome” for your node type
if (node.internal.type === "StrapiHome") {
if (sliderImages.length > 0) {
// sliderImages.forEach(el => console.log(el))
const images = await Promise.all(
sliderImages.map(el =>
createRemoteFileNode({
url: `http://localhost:1337${el.url}`,
parentNodeId: node.id,
store,
cache,
createNode,
createNodeId,
})
)
)
sliderImages.forEach((image, i) => {
image.localFile___NODE = images[i].id
})
}
}
}
later restart Gatsby and now this is your query
query MyQuery {
allStrapiProject {
nodes {
pictures {
localFile{
childImageSharp{
fluid(maxWidth: 1200){
// or for gatsby use ...GatsbyImageSharpFluid_withWebp
src
}
}
}
}
}
}
}
this has worked for me to bring multiple images with a good quality I hope it works for you
Try below, replace the value you need to display:
Here I am the example for the user avatar
query MyQuery {
allStrapiUser {
edges {
node {
id
avatar {
publicURL
childImageSharp {
fluid {
src
aspectRatio
}
}
}
}
}
}
}
and:
const poster = data.allStrapiUser.edges[0].node
<Img fluid={{aspectRatio: 1.6, src: poster.avatar.publicURL}}/>
I have this query:
query {
repositoryOwner(login: "jcubic") {
repositories(first: 20, orderBy: {field: STARGAZERS, direction: DESC}, privacy: PUBLIC) {
edges {
repository:node {
name
stargazers {
totalCount
}
}
}
}
}
}
is it possible to get multiple users intead of single one?
With help from, I was able to create query using IDs (they are from me and linus torvalds):
{
nodes(ids: ["MDQ6VXNlcjI4MDI0MQ==", "MDQ6VXNlcjEwMjQwMjU="]) {
... on User {
name
login
}
... on RepositoryOwner {
repositories(first: 20, orderBy: {field: STARGAZERS, direction: DESC}, privacy: PUBLIC) {
edges {
repository: node {
name
stargazers {
totalCount
}
}
}
}
}
}
}
I am trying to run the following query on Githubs GraphQL api:
{
user(login: "davekaj") {
id
repositories(first: 10, orderBy: {field: NAME, direction: ASC}) {
nodes {
ref(qualifiedName: "master") {
target {
... on Commit {
history(first: 15, author: "WHAT DO I PUT HERE") {
totalCount
nodes {
additions
author {
name
user {
id
}
}
committedDate
deletions
}
}
}
}
}
}
}
}
}
It wants me to filter on a CommitAuthor for history(author: ). I tried passing my username, or my unique user ID, but it doesn't work. I am essentially passing it a string, but it wants the type CommitAuthor. How do I pass a CommitAuthor value?
It isn't clear to me, and I searched through the docs and the schema and I couldn't find anything.
Please help!
Ah, so the answer is actually very simple once I looked at the graphql documentation (rather than just the github documentation). CommitAuthor is an input type, which is described here https://graphql.org/graphql-js/mutations-and-input-types/.
The result is you pass an object of CommitAuthor. In this case I just have to pass the id, which looks like this: author: {id: "MDQ6VXNlcjIyNDE3Mzgy"}
See the completed code below.
{
user(login: "davekaj") {
id
repositories(first: 10, orderBy: {field: NAME, direction: ASC}) {
nodes {
ref(qualifiedName: "master") {
target {
... on Commit {
history(first: 15, author: {id: "MDQ6VXNlcjIyNDE3Mzgy"}) {
totalCount
nodes {
additions
author {
name
user {
id
}
}
committedDate
deletions
}
}
}
}
}
}
}
}
}
Below is my code for adding and removing a person from a group.
For some reason, getOptimisticResponse is not working for this mutation.
Could this be due to having an argument groupId for isInGroup field?
class GroupAddRemovePersonMutation extends Relay.Mutation {
static initialVariables = {
groupId: null,
}
static prepareVariables(prevVars) {
return prevVars;
}
static fragments = {
person: () => Relay.QL`
fragment on Person {
id
isInGroup(groupId: $groupId)
}
`,
}
getMutation() {
return this.props.isInGroup ?
Relay.QL`mutation { groupRemovePerson }` :
Relay.QL`mutation { groupAddPerson }`;
}
getVariables() {
const {groupId, person} = this.props;
return {
personId: person.id,
groupId,
};
}
getCollisionKey() {
const {groupId, person} = this.props;
return `groupPerson_${groupId}_${person.id}`;
}
getFatQuery() {
const {groupId, person, isInGroup} = this.props;
return isInGroup ?
Relay.QL`
fragment on GroupRemovePersonMutationPayload {
person {
id
groups { id }
isInGroup(groupId: "${groupId}")
}
group {
id
person
hasPerson(personId: "${person.id}")
}
}
` :
Relay.QL`
fragment on GroupAddPersonMutationPayload {
person {
id
groups { id }
isInGroup(groupId: "${groupId}")
}
group {
id
person
hasPerson(personId: "${person.id}")
}
}
`;
}
getConfigs() {
const {groupId, person} = this.props;
return [{
type: 'FIELDS_CHANGE',
fieldIDs: {
person: person.id,
group: groupId,
},
}];
}
getOptimisticResponse() {
const {groupId, person, isInGroup} = this.props;
return {
person: {
id: person.id,
isInGroup: !isInGroup,
},
group: {
id: groupId,
hasPerson: !isInGroup,
},
};
}
}
I would try adding the groupId to the optimistic response first. In my experience, the optimistic response has to match the shape of the fat query exactly.
If you don't have the groupIds at the time the optimistic response is generated, you could try substituting temporary values until the response is returned from the server. This scenario occurs often when you are rendering a connection and providing keys to the view to distinguish repeated React elements.