i am working on apollo-client and making a query using the following code snippet.
var mapQueriesToProps = ({ ownProps, state })=> {
return {
data: {
query: gql`
query{
getProjects{
_id
name
}
}
`,
variables: {
},
forceFetch: true,
returnPartialData: true,
},
};
};
when i was set returnPartialData : false then Data have the object with {loading : true}. and after fetching the data from the server it becomes true. But the problem is when i set returnPartialData : true. Data will show always {loading : false}. Even if their is no record in the cache. Is their any solution to get the {loading: true} in the first fetch with returnPartialData: true
Related
The Apollo GraphQL team says that readQuery and writeQuery are good for 95% of the use cases. I am using useMutation and update and want to remove an item from a cache without having to call refetchQueries. My code is as follows:
const [deleteSpeaker] = useMutation(DELETE_SPEAKER, {
update(cache, { data: {deleteSpeaker}}) {
const { speakers} = cache.readQuery({query: GET_SPEAKERS});
cache.writeQuery({
query: GET_SPEAKERS,
data: { speakers: speakers.filter(speaker => speaker.id !== deleteSpeaker.id) }
});
},
});
What gets returned from readQuery leads me to think I should be filtering for speakers.datalist but when I do that, the cache does not update.
What is the correct way to update cache to reflect a removed record from the GET_SPEAKERS query.
export const DELETE_SPEAKER = gql`
mutation DeleteSpeaker($speakerId: Int!) {
deleteSpeaker(speakerId: $speakerId) {
id
first
last
favorite
}
}
`;
and GET_SPEAKERS
export const GET_SPEAKERS = gql`
query {
speakers {
datalist {
id
first
last
favorite
company
}
}
}
`;
reading apollo docs, this should be something lke:
const [deleteSpeaker] = useMutation(DELETE_SPEAKER, {
update(cache, { data: {deleteSpeaker}}) {
cache.modify({
id: cache.identify(deleteSpeaker.id),
fields: {
comments(existingSpeakerRefs, { readField }) {
return existingSpeakerRefs.filter(
speaker => deleteSpeaker.id !== readField('id', speakerRef)
);
},
},
});
},
});
I'm using Sequelize.js with SQLite-database and faced a question with setting a value for foreign key. I have the following code:
const MessageModel = sequelize.define('MessageModel ', {
uuid: DataTypes.STRING,
authorId: DataTypes.STRING,
// ... other props
}, {});
const TodoModel = sequelize.define('TodoModel', {
ownerId: DataTypes.STRING,
status: {
type: DataTypes.STRING,
defaultValue: 'pending'
}
}, {});
TodoModel.belongsTo(MessageModel , {
foreignKey: {
name: 'messageId',
field: 'messageId',
allowNull: false
},
targetKey: 'uuid'
});
MessageModel.create({
uuid: 'testUUIDForExample'
// other props
}).then(message => {
console.log(`Message's created successful`);
TodoModel.create({
ownerId: 'id-string',
status: 'test-status',
messageId: 'testUUIDForExample'
})
})
Sequelize creates MessageModel-row in DB, but it falls when it's trying to generate TodoModel with this err:
DatabaseError: SQLITE_ERROR: foreign key mismatch - "TodoModel" referencing "MessageModel "
at Query.formatError (C:\Users\lrsvo\web-development\projects\platoon-web-electron\node_modules\sequelize\lib\dialects\sqlite\query.js:432:16)
at Query._handleQueryResponse (C:\Users\lrsvo\web-development\projects\platoon-web-electron\node_modules\sequelize\lib\dialects\sqlite\query.js:77:18)
at afterExecute (C:\Users\lrsvo\web-development\projects\platoon-web-electron\node_modules\sequelize\lib\dialects\sqlite\query.js:260:31)
at Statement.errBack (C:\Users\lrsvo\web-development\projects\platoon-web-electron\node_modules\sqlite3\lib\sqlite3.js:16:21)
Err.original.message: "SQLITE_ERROR: foreign key mismatch - "TodoModel" referencing "MessageModel"
Generated SQL:
"INSERT INTO `TodoModel` (`id`,`ownerId`,`status`,`createdAt`,`updatedAt`,`messageId`) VALUES (NULL,$1,$2,$3,$4,$5);"
My TodoModel table looks like:
CREATE TABLE "TodoModel" (
"id" INTEGER PRIMARY KEY AUTOINCREMENT,
"ownerId" VARCHAR(255),
"status" TEXT DEFAULT 'pending',
"createdAt" DATETIME NOT NULL,
"updatedAt" DATETIME NOT NULL,
"messageId" VARCHAR(255) NOT NULL,
FOREIGN KEY("messageId") REFERENCES "MessageModel"("uuid") ON DELETE NO ACTION ON UPDATE CASCADE
);
I can't get why is the err occurs and need help, cause I'm dummy in this ORM.
I'm using "sequelize": "^5.1.0" with SQLite.
MyConfig file:
const Sequelize = require("sequelize");
const electron = require('electron');
const storagePath = electron.app.getPath('userData') + '/plt.db';
module.exports = {
development: {
dialect: "sqlite",
storage: storagePath,
username: null,
password: null,
operatorsAliases: Sequelize.Op,
define: { freezeTableName: true },
query: { raw: true }, // Always get raw result
logging: true,
},
};
There are a copuple of things here. First If you are going to use uuid on MessageModel as primary key, you have to define it, otherwise you'll have a default id field.
const MessageModel = sequelize.define('MessageModel ', {
uuid:{ // if this is your primary key you have to define it
type: DataTypes.STRING, //there is also DataTypes.UUID
allowNull: false,
primaryKey: true,
unique: true
},
authorId: DataTypes.STRING,
// ... other props
}, {});
Then on your TodoModel, you are setting the messageId association as integer. To change it to string, you have to define the field on the model, and on the association use it as a foreign key.
const TodoModel = sequelize.define('TodoModel', {
ownerId: DataTypes.STRING,
status: {
type: DataTypes.STRING,
defaultValue: 'pending'
},
messageId: { //you also have to add the field on your model and set it as STRING, because on the association Sequelize by default is going to use INTEGER
type: DataTypes.STRING,
allowNull: false
}
}, {});
TodoModel.belongsTo(MessageModel , {
as: 'Message',
foreignKey: 'messageId', // and you only set the foreignKey - Same name as your field above
});
After making a mutation the UI does not update with a newly added item until the page is refreshed. I suspect the problem is in the update section of the mutation but I'm not sure how to troubleshoot further. Any advice is much appreciated.
Query (separate file)
//List.js
export const AllItemsQuery = gql`
query AllItemsQuery {
allItems {
id,
name,
type,
room
}
}
`;
Mutation
import {AllItemsQuery} from './List'
const AddItemWithMutation = graphql(createItemMutation, {
props: ({ownProps, mutate}) => ({
createItem: ({name, type, room}) =>
mutate({
variables: {name, type, room},
optimisticResponse: {
__typename: 'Mutation',
createItem: {
__typename: 'Item',
name,
type,
room
},
},
update: (store, { data: { submitItem } }) => {
// Read the data from the cache for this query.
const data = store.readQuery({ query: AllItemsQuery });
// Add the item from the mutation to the end.
data.allItems.push(submitItem);
// Write the data back to the cache.
store.writeQuery({ query: AllItemsQuery, data });
}
}),
}),
})(AddItem);
Looks promising, one thing that is wrong is the name of the result of the mutation data: { submitItem }. Because in the optimistic Response you declare it as createItem. Did you console.log and how does the mutation look like?
update: (store, {
data: {
submitItem // should be createItem
}
}) => {
// Read the data from our cache for this query.
const data = store.readQuery({
query: AllItemsQuery
});
// Add our comment from the mutation to the end.
data.allItems.push(submitItem); // also here
// Write our data back to the cache.
store.writeQuery({
query: AllItemsQuery,
data
});
}
I'm not entirely sure that the problem is with the optimisticResponse function you have above (that is the right approach), but I would guess that you're using the wrong return value. For example, here is a response that we're using:
optimisticResponse: {
__typename: 'Mutation',
updateThing: {
__typename: 'Thing',
thing: result,
},
},
So if I had to take a wild guess, I would say that you might want to try using the type within your return value:
optimisticResponse: {
__typename: 'Mutation',
createItem: {
__typename: 'Item',
item: { // This was updated
name,
type,
room
}
},
},
As an alternative, you can just refetch. There have been a few times in our codebase where things just don't update the way we want them to and we can't figure out why so we punt and just refetch after the mutation resolves (mutations return a promise!). For example:
this.props.createItem({
... // variables go here
}).then(() => this.props.data.refetch())
The second approach should work every time. It's not exactly optimistic, but it will cause your data to update.
I have a reducer with a default initial state defined like this:
const webReducer = (state = {
fetched: false,
data: {}
}, action) => {
switch (action.type) {
case "FETCH_DATA":
state = {
...state,
fetched: action.payload.fetched
};
state.data.push( action.payload.data );
return state;
break;
}
return state;
};
When I run a test to check for the initial state, it pass:
const initialState = {
fetched: false,
data: {}
};
it("Should have a default initial state", () => {
expect( webReducer( undefined, {}) ).toEqual( initialState );
})
However, when I try to test adding data to the state, it return this error:
TypeError: state.data.push is not a function
This is how I'm doing the test:
const object = {
fetched: true,
data: {
config: {size: 10}
}
};
expect(
webReducer( undefined, {
type: "FETCH_DATA",
payload: object
})
).toEqual( object );
Why am i getting this error now, if before i could pass the test just fine? I also tried to pass a default state, like this:
expect(
webReducer( initialState, {
type: "FETCH_DATA",
payload: object
})
).toEqual( object );
But I'm getting the same error.
You have initialised data as an empty object, which doesn't have a push function on it. Try replacing it with the below, and the test should pass alright.
state = {
fetched: false,
data: []
I have my list which is getting data from php service, the data received is in the order I need. But sencha automatically sort my list alphabetically.
Below is my code:
Ext.define('MyList', {
extend: 'Ext.dataview.List',
config: {
grouped: true,
plugins: [
{
xclass: 'Ext.plugin.PullRefresh',
pullRefreshText: 'Pull down to refresh'
},
{
xclass: 'Ext.plugin.ListPaging',
autoPaging: true,
noMoreRecordsText: 'No More Records'
}
]
},
initialize: function () {
this.callParent(arguments);
var store = Ext.create('Ext.data.Store', {
pageParam: 'page',
grouper: {
groupFn: function (record) {
return record.data.group_label;
}
},
model: 'ListItem',
proxy: {
type: 'ajax',
url: '/m/services/activity_list_items.php',
reader: {
type: 'json',
rootProperty: 'root.results'
}
}
});
var template = Ext.create('GenericListItem', {
hascounts: true,
hasicon: true,
varmap: {
descr: 'subtext',
count: 'sub_item_cnt',
itemid: 'itemid',
uniqid: 'uniqid'
}
});
var emptyText = 'Recent Activity Items';
this.setStore(store);
this.setItemTpl(template);
this.setEmptyText(emptyText);
}
});
How can I avoid the auto sorting of list?
Add the following to your store config.
remoteSort : true,
remoteSort defaults to false in sencha. So sencha automatically sorts in the client side. Check the link for more details http://docs.sencha.com/touch/2-0/#!/api/Ext.data.Store-cfg-remoteSort
Just remove this:
grouped: true
from your list config if you don't want a header for each item and compulsory to remove this:
grouper: {
groupFn: function (record) {
return record.data.group_label;
}
}
from your store because basically in your situation grouper property are using for grouping your item alphabetically based on your group_label field. Hope it helps :)