I'm using GitHub Graphql API and I wrote following code with react-apollo but when I paginate after many requests I get following errors on the console.
You are using the simple (heuristic) fragment matcher, but your queries contain union or interface types. Apollo Client will not be able to accurately map fragments. To make this error go away, use the IntrospectionFragmentMatcher as described in the docs: https://www.apollographql.com/docs/react/recipes/fragment-matching.html
.
WARNING: heuristic fragment matching going on!
.
Missing field name in {
"__typename": "Organization"
}
Missing field avatarUrl in {
"__typename": "Organization"
}
Missing field repositories in {
"__typename": "Organization"
}
and I wrote the following codes:
gql`
query($username: String!, $nextPage: String) {
search(query: $username, type: USER, first: 100, after: $nextPage) {
pageInfo {
hasNextPage
endCursor
}
edges {
node {
... on User {
name
avatarUrl
repositories {
totalCount
}
}
}
}
}
}
`;
handleSubmit = ({ username }) => {
const { client } = this.props;
this.setState({
loading: true,
searchTerm: username,
});
client
.query({
query: SEARCH_USER,
variables: {
username
}
})
.then(({ data }) => {
this.setState({
loading: false,
searchList: data.search.edges,
pagination: data.search.pageInfo,
});
})
.catch(err => {
console.warn(err);
});
};
Because Apollo has not enough information about your GraphQL Schema you need to provide it somehow. Apollo has a well written documentation on that topic.
It describes to use a script to introspect your GraphQL Server in order to get that missing information about Unions and Interfaces.
To make the process even easier I wrote a plugin for GraphQL Code Generator that automates everything. There's a chapter called "Fragment Matcher" that I recommend to read.
Either first, the manual solution or the second should fix your problem :)
Related
When using Apollo client, I find it quite tedious to manually update the cache for every mutation that requires an immediate UI update. I therefore decided to try to make a custom hook which updates the cache automatically.
The hook works but it seems a little "hacky" and I'm worried it might mess with the normal functioning of the cache. So I just wanted to ask if this hook seems like it should work ok?
Here's the code (where mutationName is the actual graphql mutation name and fieldName is the original graphql query name corresponding to the mutation):
export const useMutationWithCacheUpdate = (
mutation,
mutationName,
fieldName
) => {
const [createMutation, { data, loading, error }] = useMutation(mutation, {
update(cache, { data }) {
data = data[mutationName];
cache.modify({
fields: {
[fieldName]: (existingItems = []) => {
const newItemRef = cache.writeFragment({
data: data,
fragment: gql`
fragment newItem on ${fieldName} {
id
type
}
`,
});
return [...existingItems, newItemRef];
},
},
});
},
});
return [createMutation, { data, loading, error }];
};
I'm new to both Strapi and Mongoose, so I apologise if this is a stupid question.
Following the docs (https://strapi.io/documentation/developer-docs/latest/development/backend-customization.html) I'm trying to create a custom query in Strapi in which I want to return the whole collection called people sorted by name desc. But when I hit the endpoint I get a 500 error and checking the terminal the error message is CastError: Cast to ObjectId failed for value "alldesc" at path "_id" for model "people".
Here's my code:
services/people.js
module.exports = {
findByNameDesc() {
const result = strapi
.query("people")
.model.find()
.sort({ name: "descending" });
return result.map((entry) => entry.toObject());
},
};
controllers/people.js
module.exports = {
async alldesc(ctx) {
const entities = await strapi.services.people.findByNameDesc(ctx);
return entities.map((entity) =>
sanitizeEntity(entity, { model: strapi.models.people })
);
},
};
config/routes.json
{
"routes": [
...
{
"method": "GET",
"path": "/people/alldesc",
"handler": "people.alldesc",
"config": {
"policies": []
}
}
]
}
What am I doing wrong?
UPDATE: even when removing .sort({ name: "descending" }); from the query, the error is still there, so I'm thinking that maybe there's something wrong in the way I use the service in the controller?
The problem was in routes.json. Basically seems like Strapi doesn't like the slash / so instead of /people/alldesc I tried /people-alldesc and it worked.
Also in the service there's no need for return result.map((entry) => entry.toObject());, that causes anther error, simply doing return result works.
I've recently moved from manually calling my Hasura client to using Apollo-module.
I added this under #Component
apollo: {
features: {
query: gql`query { features { id, name } }`
},
tenants: {
query: gql`query { tenants { id, name } }`
},
listings: {
query () {
return gql`${(this as any).buildListingsQuery()}`
},
prefetch: true
}
}
However it only fetches the data on page load, then when the query changes the data is lost and I have to manually refetch them creating a lag, also the loading option is lost so I can't use that one either. Any leads would help, thank you
For anyone that goes through a similar issue, it was fixed for me by using the network for the fetch policy. I added
fetchPolicy: 'network-only'
I have below graphl api query that i am using to send the data from react front app with the object to get the desired results
{
allSectionRequests(data:{
requestStageName:"Request Submitted"
}){
section
type
}
}
and then i am trying to pass variable from react like below
export const GET_SECTIONREQUESTS = gql`
query AllSectionRequests($data: sectionRequestParamsInput){
allSectionRequests(data: $data){
section
type
}
}
`;
I have attached the image that i need to send to graphql api below
and the below is the react code that i will be calling query inside component and then passing data object to graphql api
const { data: dashBoardData, loading: dashBoardDataLoading, error: dashBoardDataError } = useQuery(GET_SECTIONREQUESTS, {
variables: { data: { requestStageName: 'Request Submitted' } },
});
I am getting error like this below
The variable **data** type is not compatible with the type of the argument **data**.
↵Expected type: SectionRequestParamsInput.
i am not sure where i am doing wrong with this code, could any one please help on this one .
Many thanks
I have rectified my problem with the below solution
export const GET_SECTIONREQUESTS = gql`
query AllSectionRequests($sectionRequestParamsInput: SectionRequestParamsInput){
allSectionRequests(data: $sectionRequestParamsInput){
id
section
type
createdBy
description
status
age
}
}
`;
and then changed my input parameters in react like this
const { data: dashBoardData, loading: dashBoardDataLoading, error: dashBoardDataError } = useQuery(GET_SECTIONREQUESTS, {
variables: { sectionRequestParamsInput: { requestStageName: 'Request Submitted' } },
});
i hope this will helps to any person who is looking for graphql api query with parameters passed in.
I just started working with Gatsby to see if it would be a good choice to rebuild my company's CraftCMS website with Craft as the backend and Gatsby as the frontend. So far everything has been working well until it came time to query for the individual entries inside our "campaign" channel.
For the record, I have been able to render a complete list using .map() for each of my campaign entries on a "overall view" page to see all the campaigns. I have also been able to recursively build out each campaign page so that it calls my /src/templates/campaign-page.js template and has the correct slug pulled from my site's Craft API with no issue. For some reason, I just can't get my individual campaign data to query inside the campaign-page.js template.
I've read just about every page in the Gatsby docs and every tutorial that currently exists, but for the life of me I can't figure out why my GraphQL query will not filter for my individual campaign entries. It just keeps telling me, "GraphQL Error Expected type [String], found {eq: $slug}."
I've also tried wrapping my "slug: {eq: $slug} in a "filter:" based on some markdown docs, but that just tells me "filter" does not exist. I'm beginning to think the issue is in my gatsby-node.js file, but I'm not seeing any issue when I compare it to the docs.
Gatsby-node.js
const path = require(`path`)
exports.createPages = async ({ actions, graphql }) => {
const { data } = await graphql(`
query {
api {
entries(section: "campaigns") {
slug
}
}
}
`)
data.api.entries.forEach(({ slug }) => {
actions.createPage({
path: "/campaigns/" + slug,
component: path.resolve(`./src/templates/campaign-page.js`),
context: {
slug: slug,
},
})
})
}
Campaign-page.js
export default ({data}) => {
const post = data.api.entries
return(
<div className={"campaign-page-single"} style={{marginTop: '-21px,'}}>
<Header/>
<div>
<h1>{post.id}</h1>
</div>
</div>
)
}
export const campaignQuery = graphql`
query ($slug: String!){
api{
entries (slug: { eq: $slug }){
slug
id
... on API_campaigns_campaigns_Entry {
id
campaignTitle
slug
}
}
}
}
`
For reference, here's what a typical working query looks like on my main campaigns.js page that lists all available campaigns:
query = {graphql`
{
api {
entries(section: "campaigns") {
... on API_campaigns_campaigns_Entry {
id
campaignTitle
uri
slug
}
}
}
}
`}
I expect my /src/templates/campaign-page.js template to render the individual campaign data.
I finally had one of my coworkers take a look at my code. All I had to do was wrap my $slug variable in brackets as so:
entries (section: "campaigns", slug: [$slug] )
That's two days I wish I could have back.