I currently have a AppSync schema where I created a separate query within the AppSync console in order retain certain parameter (assetId) and get a list of the results in my DynamoDB table. I have tested the query already within the AppSync console and it works fine, I am now just having troubles using Amplify in my React App in order to call the query. I get the following error when running my App:
DisplayCard.js:34 Uncaught (in promise) {data: null, errors: Array(1)}
"Validation error of type FieldUndefined: Field 'getAssetIdRating' in type 'Query' is undefined # 'getAssetIdRating'"
I have tried following the documentation as per the Amplify site (https://aws-amplify.github.io/docs/js/api) but am still receiving this error.
For reference here is the query when I run it in the AppSync console: (returns the desired result)
query getAssetIdRating {
getRatingsAssetId(assetId:"949142fb-91d2-41bd-8c04-1d42ed8166c9") {
items {
id
assetId
rating
}
}
}
The resolver that I am using for this query is the following: (I have created a separate Index)
{
"version" : "2017-02-28",
"operation" : "Query",
"index": "assetId-index",
"query" : {
## Provide a query expression. **
"expression": "assetId = :assetId",
"expressionValues" : {
":assetId" : $util.dynamodb.toDynamoDBJson($ctx.args.assetId)
}
}
}
And now moving onto my React code, this is the current query that I am using within react, under src/graphql/queries.
export const getAssetIdRating = /* GraphQL */ `
query getRatingAssetId($assetId: ID) {
getAssetIdRating(assetId: $assetId) {
items {
id
assetId
rating
}
}
}
`;
And when I call it then in my React application:
componentDidMount = async () => {
this.getRatings();
}
getRatings = async () => {
let { assetIdRatings } = this.state;
const result = await API.graphql(graphqlOperation(queries.getAssetIdRating, {assetId: '949142fb-91d2-41bd-8c04-1d42ed8166c9'}));
console.log(result);
}
Note that when I call the listRatings query it works fine, just does not work with this query. And as a side note, I added this query later in manually through the AppSync console, I don't presume that should play an issue?
Either way, any help would be greatly appreciated! And I can upload anymore necessary code if required! Thanks for the help!
sorry you can ignore the question, it was a simple typing error :P You miss it when its late at night!
You can see the typing error on my Query:
getRatingsAssetId(assetId:"949142fb-91d2-41bd-8c04-1d42ed8166c9") {
getAssetIdRating(assetId: $assetId) {
Thanks though for the help!
Related
I am trying to fetch data from a Supabase table called "profiles" with Next.js 13 and the app directory. I am trying to take advantage of the new next.js fetching methods, my code looks as follows:
export const revalidate = 0;
export default async function getData() {
const { data: profiles } = await supabase
.from("profiles")
.select("*")
.eq("is_host", true);
console.log(profiles);
return { profiles };
if (!profiles) {
return <p>No hosts found</p>
}
The problem is that this code seems to be wrapping the array returned from Supabase in an object.
The data returned looks like this:
{data:
[
{
"id":"feef56d9-cb61-4c4d-88c6-8a8d7c9493d9",
"updated_at":null,
"username":"username",
"full_name":"Full Name",
"avatar_url":"URL",
"website":null,
"is_host":true,
"bio":null,
"languages":6
}
]
}
When I use useState and useEffect instead, the data is returned as expected, and I can map through it.
Does anybody have an idea why, and how I can prevent that?
Thanks in advance.
I worked it out, through a subsequent error, which I as able to solve thanks to the question I asked here and the helpful hints I got from there.
return { profiles };
Returns the array inside an object.
By removing the {} I was able to fetch the array inside of it.
I guess this is a simple issue, but I am stuck here for a while, so any advice may be helpful!
I have a react app and I am calling a GraphQL api (with apollo). Inside an arrow function component I have:
const [executeQuery, { data }] = useLazyQuery(GET_ALL_TASKS);
const findId = (step) => {
executeQuery({
variables: {
"query": {
"state": "CREATED",
"taskDefinitionId": "something"
}
}
})
}
The query is successful and in the browser inspect panel I get this as the graphql response:
{
"data" : {
"tasks" : [ {
"id" : "2251",
"name" : "some_name",
"__typename" : "Task"
} ]
}
}
In my code I want to use the retrieved id. How can I isolate the id from the response? When I am trying to access the data I get an undefined error.
Thank you!
Not sure why you are wrapping your executeQuery in a function.
The data will be part of the response so you can get it like this:
const {data, loading} = executeQuery({
variables: {
"query": {
"state": "CREATED",
"taskDefinitionId": "something"
}
}
})
// may also need to check for the error state
if(loading){
console.log("Loading...")
}else{
/// the ids seem to be an array of objects
const ids = data.tasks.map((task)=> task.id)
console.log(ids)
}
For anyone who may have the same problem, I realized it is a caching error happening in apollo client. I couldn't figure out the solution. However, I temporarily solved it by downgrading the apollo client dependency to version 3.2.5
When using the AWS AppSync console, I can run this query and get a return...
listAccounts {
items {
name
cameras {
items {
name
}
}
}
}
}
But when I run the same query from inside my react app using
await API.graphql({ query: queries.listAccounts })
I get an error...
"Validation error of type FieldUndefined: Field 'items' in type 'Query' is undefined # 'items'"
My issue is that an Account will not always have a camera, in which case I would like to be able to get the response and still display the camera data. Can anyone help me out here. Is there some way to 'allow' undefined?
I am trying to update my chache after succesfully executing a mutation. Here is my query and mutation:
export const Dojo_QUERY = gql`
query Dojo($id: Int!){
dojo(id: $id){
id,
name,
logoUrl,
location {
id,
city,
country
},
members{
id
},
disziplines{
id,
name
}
}
}`;
export const addDiszipline_MUTATION = gql`
mutation createDisziplin($input:DisziplineInput!,$dojoId:Int!){
createDisziplin(input:$input,dojoId:$dojoId){
disziplin{
name,
id
}
}
}`;
and my mutation call:
const [createDisziplin] = useMutation(Constants.addDiszipline_MUTATION,
{
update(cache, { data: { createDisziplin } }) {
console.log(cache)
const { disziplines } = cache.readQuery({ query: Constants.Dojo_QUERY,variables: {id}});
console.log(disziplines)
cache.writeQuery({
...some update logic (craches in line above)
});
}
}
);
when i execute this mutation i get the error
Invariant Violation: "Can't find field dojo({"id":1}) on object {
"dojo({\"id\":\"1\"})": {
"type": "id",
"generated": false,
"id": "DojoType:1",
"typename": "DojoType"
}
}."
In my client cache i can see
data{data{DojoType {...WITH ALL DATA INSIDE APPART FROM THE NEW DISZIPLINE}}
and
data{data{DisziplineType {THE NEW OBJECT}}
There seems to be a lot of confusion around the client cache around the web. Somehow none of the posed solutions helped, or made any sense to me. Any help would be greatly appreciated.
EDIT 1:
Maybe this can help?
ROOT_QUERY: {…}
"dojo({\"id\":\"1\"})": {…}
generated: false
id: "DojoType:1"
type: "id"
typename: "DojoType"
<prototype>: Object { … }
<prototype>: Object { … }
Edit 2
I have taken Herku advice and started using fragment. however it still seems to not quite work.
My udated code:
const [createDisziplin] = useMutation(Constants.addDiszipline_MUTATION,
{
update(cache, { data: { createDisziplin } }) {
console.log(cache)
const { dojo } = cache.readFragment(
{ fragment: Constants.Diszilines_FRAGMENT,
id:"DojoType:"+id.toString()});
console.log(dojo)
}
}
);
with
export const Diszilines_FRAGMENT=gql`
fragment currentDojo on Dojo{
id,
name,
disziplines{
id,
name
}
}
`;
however the result from console.log(dojo) is still undefined.Any advice?
So I think your actual error is that you have to supply the ID as as a string: variables: {id: id.toString()}. You can see that these two lines are different:
dojo({\"id\":1})
dojo({\"id\":\"1\"})
But I would highly suggest to use readFragment instead of readQuery and update the dojo with the ID supplied. This should update the query as well and all other occurrences of the dojo in all your queries. You can find documentation on readFragment here.
Another trick is as well to simply return the whole dojo in the response of the mutation. I would say people should be less afraid of that and not do to much cache updates because cache updates are implicit behaviour of your API that is nowhere in your type system. That the new disziplin can be found in the disziplins field is now encoded in your frontend. Imagine you want to add another step here where new disziplins have to be approved first before they end up in there. If the mutation returns the whole dojo a simple backend change would do the job and your clients don't have to be aware of that behaviour.
I'm having trouble to batch queries using ApolloClient when I'm calling BatchHttpLink in my client. I've opened a issue on react-apollo repo where you can check with more details my code:
https://github.com/apollographql/react-apollo/issues/1656
basically seems like initially Apollo is doing the right thing: batching the queries and returning the results properly, but I'm getting the following error on my console:
ApolloError.js:34 Uncaught (in promise) Error: Network error: Error writing result to store for query:
query CategoriesServicesQuery {
categories {
id
name
slug
tags {
id
slug
name
__typename
}
__typename
}
}
Cannot read property 'categories' of undefined
at new ApolloError (ApolloError.js:34)
at QueryManager.js:277
at QueryManager.js:664
at Array.forEach ()
at QueryManager.js:663
at Map.forEach ()
at QueryManager.broadcastQueries (QueryManager.js:658)
at QueryManager.js:226
at
the response looks like:
[
{
query: ,
variables: ,
},
{
query: ,
variables: ,
},
{
query:
variables: ,
}
]
I believe, somehow under the hood, Apollo should handle this and return this.props.data to the respective app components.
I'm not sure what I'm missing.